Résumé des unités CSS (telles que rem, px, em, vw, vh, vm)

Cet article vous présente un résumé des unités CSS (telles que rem, px, em, vw, vh, vm) et présente les différences entre ces unités. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

px : unité de longueur relative du pixel, par rapport à la résolution d'affichage de l'écran

em : em La valeur n'est pas fixe et sera intégrée ; avec la taille de police de l'élément parent ;

Remarque :

1. Sélectionnez body et déclarez Font-size=62.5%

2. Divisez la valeur px d'origine par 10, puis remplacez-le par em comme unité

　3. Recalculez la valeur em des polices agrandies. Évitez les déclarations répétées de tailles de police.

La taille de police par défaut de tout navigateur est de 16 px. Tous les navigateurs non ajustés sont conformes à 1em=16px, 0,75em=12px et 10px=0,625em. Afin de simplifier la conversion de Font-size, vous devez déclarer Font-size=62,5% dans le sélecteur de corps en CSS, ce qui fait que la valeur de em devient 16px*62,5%=10px, donc 12px vaut 1,2em et 10px vaut 1em. Autrement dit, divisez simplement la valeur px d'origine par 10 et remplacez-la par l'unité em.

rem : unité relative, (la racine em est rem). Lorsque vous utilisez rem comme unité pour définir la taille de la police, elle est relative à la taille de l'élément racine HTML, ce qui peut être proportionnel à l'élément racine. Modifiez et ajustez toutes les tailles de police. Généralement, elles sont écrites sur le corps ou le html. Par exemple :

body{font-size:625%;}

, qui est 1rem=100px ; , mais c'est mieux lors de l'écriture de projets. Il est facile de faire correspondre les requêtes multimédias, par exemple :

　　html{font-size:10px}　　　　　　//10px==62.5%

　　@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}

　　@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}

　　@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}

　　@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}

　　@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}

　　@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}

　　@media screen and (min-width:800px){html{font-size:25px}}

vw

 : la largeur maximale de la fenêtre d'affichage, 1vw = un pour cent de la largeur de la fenêtre ;

vh

 : la hauteur maximale de la fenêtre, 1vh = un pour cent de la hauteur de la fenêtre

vmin/vm

 : la plus petite de la largeur ou de la hauteur par rapport à la fenêtre d'affichage de celui-ci. Le plus petit est divisé en 100 unités de vmin (c'est-à-dire vm).
Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo CSS

 ! Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Tutoriel graphique div/css

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!