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>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; } }
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> 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.