Comprendre en profondeur les différences entre px, em et rem, ainsi que leurs avantages et inconvénients

Lorsque nous mettons en page la page, nous devons souvent définir la longueur, la largeur et la hauteur de la boîte. Alors, quelles unités sont utilisées pour ces longueurs, largeurs et hauteurs ? En fait, les maîtres du design nationaux aiment tous utiliser px, tandis que la plupart des sites Web étrangers aiment utiliser em et rem. Alors Quelles sont les différences entre px, em et rem, et quels sont les avantages et les inconvénients de. chaque? Ensuite, je vais vous le présenter, les amis qui en ont besoin peuvent y jeter un œil.

Caractéristiques px :

1. IE ne peut pas ajuster la taille de la police qui utilise px comme unité

2. La raison en est qu'il utilise em ou rem comme unité de police ;

3. Firefox peut ajuster px et em, rem, mais plus de 96 % des internautes chinois utilisent le navigateur (ou le noyau) IE.

px pixels (Pixel). Unité de longueur relative. Les pixels px sont relatifs à la résolution de l'écran d'affichage. (Cité du manuel CSS2.0)

em est une unité de longueur relative. La taille de la police par rapport au texte dans l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur (16 px). (Citation du manuel CSS2.0)

La hauteur de police par défaut de tout navigateur est de 16 px. Tout le tofu du navigateur non ajusté : 1em=16px. Alors 10px = 0,625px. Afin de simplifier la conversion de font-size, vous devez déclarer font-size=62.5% dans le sélecteur de corps de css, ce qui fait que la valeur em devient 16px*62.5%=10px, donc 10px=1em, c'est-à-dire , il vous suffit de modifier l'original. Divisez simplement la valeur px par 10, puis remplacez-la par em comme unité.

em Caractéristiques :

1.em La valeur n'est pas fixe

2.em héritera de la taille de police de l'élément parent.

Ainsi, lorsque nous écrivons du CSS, si nous déclarons font-size=62,5% dans le sélecteur de corps, divisez la valeur px d'origine par 10, puis remplacez-la par em comme unité, recalculez celles avec em comme unité ; la valeur unitaire pour éviter la déclaration répétée de la taille de la police.

C'est pour éviter le phénomène de 1,2*1,2=1,44. Par exemple, si vous déclarez que la taille de la police est de 1,2 em dans #content, alors lorsque vous déclarez la taille de la police de p, elle ne peut être que de 1 em, et non de 1,2 em, car ce em n'est pas celui-là et il est très variable. car il hérite de la taille de police de #content. Pour 1em=12px.

Caractéristiques de rem :

rem est une nouvelle unité relative (root em root em) en CSS3. Cette unité a attiré une large attention. Quelle est la différence entre cette unité et em ? La différence est que lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML. On peut dire que cette unité combine les avantages de la taille relative et de la taille absolue. Grâce à elle, vous pouvez ajuster toutes les tailles de police proportionnellement en modifiant uniquement l'élément racine, et vous pouvez éviter la réaction en chaîne consistant à composer les tailles de police couche par couche. Actuellement, tous les navigateurs, à l'exception d'IE8 et des versions antérieures, prennent en charge rem. Pour les navigateurs qui ne le prennent pas en charge, la solution est très simple : écrire une instruction d’unité absolue supplémentaire. Ces navigateurs ignorent les tailles de police définies avec rem. Voici un exemple :

p{font-size:14px;font-size:875rem;}

Remarque :

L'unité de police que vous choisissez d'utiliser est principalement déterminée par votre projet. Si votre base d'utilisateurs utilise toutes la dernière version du navigateur, alors. Il est recommandé d'utiliser rem. Si vous souhaitez prendre en compte la compatibilité, utilisez px ou utilisez les deux en même temps.

Nous vous fournissons ici un outil de conversion d'unités px, em, rem. Adresse : http://pxtoem.com/

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!