Meilleurs paramètres de taille de police pour mobile-tutoriel HTML-php.cn

Meilleurs paramètres de taille de police pour mobile

PHPz

Libérer： 2018-05-15 11:01:30

original

17368 Les gens l'ont consulté

Hé, laissez-moi vous expliquer comment utiliser certaines unités CSS mobiles. px n'est certainement pas possible. Les téléphones mobiles ont autant de tailles, alors combien de @media doit être écrit. Il existe deux unités les plus couramment utilisées :
1, rem

rem est défini par rapport à la taille de l'élément racine, et l'élément racine dans le la page Web fait référence à C'est du HTML. Nous pouvons contrôler la taille du rem en définissant la taille de la police du HTML. Par exemple :

<!DOCTYPE html>
<html>
<head>    
<meta charset="utf-8" />    
<title></title>    
<style type="text/css">        
html{            
font-size:20px;        }        
p{            
width: 600px;            
overflow: hidden;            
line-height: 1;            
font-size: 1rem;        }    
</style></head>    <body>    
<p>        是啊啊啊    
</p></body></html>

Copier après la connexion

Lorsque vous définissez font-size:20px; dans l'élément racine html, 1rem = 20px de même, si vous définissez 10px, alors 1 rem = 10px ne peut pas être utilisé uniquement pour la taille des polices ; peut également être utilisé pour les unités de longueur telles que la largeur. À ce stade, vous vous demandez peut-être comment obtenir une telle réactivité ? Par conséquent, nous devons combiner @media pour définir la taille de l'élément racine HTML, de sorte que toutes les unités rem correspondantes dans la page suivent l'élément racine, par exemple :

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}

Copier après la connexion

Si Si vous ne définissez pas la taille de la police HTML, 16px sera utilisé comme base. L'avantage de ceci par rapport à px est évident. Vous n'avez pas besoin d'appliquer @media à chaque élément. Il vous suffit de définir des tailles différentes pour l'élément racine HTML. La compatibilité est également très bonne.
2. vw, vh
Bien que l'unité rem soit encore très simple, elle n'est toujours pas assez simple et grossière. Il existe une autre unité plus simple, qui est la. Unité VW et VH.

Largeur relative à la fenêtre. La fenêtre d'affichage est divisée en 100 unités de VW. Par exemple, 1vw équivaut à 1 % de la largeur de l’écran. Allez simplement à l'exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p{
            width: 20vh;
            height: 30vw;
            line-height: 1;
            font-size: 1vw;
            background: #FC8B53;
            color: #fff;
        }
    </style>
</head> 
<body>
    <p>
        是啊啊啊
    </p>
</body>
</html>

Copier après la connexion

Après l'avoir réglé ainsi, la largeur de p changera avec le changement de la hauteur de l'écran, sa hauteur changera avec le changement de la largeur de l'écran, et la taille de la police changera également avec l'écran. J'ai fait cela pour exprimer plus intuitivement la flexibilité de l'unité VW. Plus besoin d'écrire un tas de trucs @media désordonnés.
Qu’est-ce qu’une méthode flexible ? Par exemple, si vous définissez la largeur d'un p à 50 % de l'écran, alors la largeur est de 50vw. À ce stade, vous devez définir sa hauteur à 50 % de sa largeur. Et si vous n'utilisez pas vw ? Vous ne pouvez utiliser que js pour calculer. Mais lorsque vous utilisez VW, réglez-le simplement sur 25 VW et tout ira bien.
Cependant, il y a quelques problèmes de compatibilité. Il n'y a aucun problème avec iOS. Le navigateur fourni avec un téléphone Android nécessite Android 4.4 ou supérieur. Les autres navigateurs sont OK, seul celui qui l'accompagne a des problèmes. Mais qui utilise encore le navigateur intégré d’Android pour jouer avec ? On ne le trouve nulle part. Alors, utilisez simplement vw et vh.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!