Quelles unités y a-t-il en CSS ?

Les unités CSS sont : %, pourcentage ; po, pouce ; cm, centimètre ; mm, millimètre ; pt, livre (1 pt équivaut à 1/72 pouce), type mobile à 12 points ; px, Pixel (un point sur l'écran de l'ordinateur) ; vw, la largeur du plein écran est de 100 vw, la hauteur du plein écran est de 100 vh ;

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

% Pourcentage

en pouces

cm centimètres

mm millimètres

em

1em est égal à la taille de police actuelle.

2em est égal à deux fois la taille de police actuelle.

Par exemple, si un élément est affiché à 16px, alors 2em équivaut à 32px.

En CSS, em est une unité très utile car elle s'adapte automatiquement à la police utilisée par l'utilisateur.

ex Un ex est la hauteur x d'une police. (La hauteur x est généralement la moitié de la taille de la police.)

point pt (1 pt équivaut à 1/72 de pouce)

pc Type de 12 points (1 pc équivaut à 12 points)

px pixel (un point sur un écran d'ordinateur )

vw : (valeur 1-100), comprenez que la largeur plein écran est de 100vw, écran adaptatif.

Vh : (valeur 1-100), comprenez que la hauteur plein écran est de 100vh, écran adaptatif.

Informations détaillées :

1. Le problème d'em et de px

Qu'est-ce que px ?

px pixel (Pixel). Unité de longueur relative. Les pixels px sont relatifs à la résolution de l'écran du moniteur. (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. (Cité dans le manuel CSS2.0)

Fonctionnalités PX

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

2. La raison pour laquelle la plupart des sites Web étrangers peuvent s'ajuster est qu'ils utilisent em ou rem comme polices Unité ;

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

em Qu'est-ce que c'est ?

em fait référence à la hauteur de la police. La hauteur de police par défaut de tout navigateur est de 16 pixels. Les navigateurs non modifiés suivent donc : 1em=16px. Puis 12px=0,75em, 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 em devient 16px*62.5%=10px, donc 12px=1.2em, 10px=1em , c'est-à-dire également qu'il vous suffit de diviser votre valeur px d'origine par 10, puis de la remplacer par em comme unité.

Caractéristiques em :

1em fait référence à la taille d'une police. Il héritera de la taille de la police de l'élément parent, ce n'est donc pas une valeur fixe. La taille de police par défaut pour tout navigateur est de 16 px. Par conséquent, 12px = 0,75em. Afin de faciliter la conversion dans les applications réelles, le style est généralement défini comme suit :

Code CSS

html { font-size : 62,5% }

De cette façon, 1em = 10px. Le 1.2em couramment utilisé est théoriquement de 12px. Cependant, cette conversion ne tient pas dans le navigateur IE. 1.2em sera légèrement plus grand que 12px. La solution est de changer 62,5 % dans le style de la balise html en 63 %, soit :

Code CSS

html { font-size. : 63%; }

Dans les articles chinois, il y a généralement deux espaces au début du paragraphe. Si px est utilisé comme unité, 24px doit être laissé de côté pour une police de 12px, et 28px doit être laissé de côté pour une police de 14px... Cette conversion est très inutilisable. Si vous utilisez l'unité em, ce problème peut être facilement résolu. La taille d'un mot est de 1em et la taille des deux mots est de 2em. Par conséquent, définissez-le simplement comme ceci :

Code CSS

p { text-indent: 2em; }

La différence entre les unités de police em et px

L'unité de police doit être em au lieu de px. Il prend simplement en charge la mise à l'échelle des polices sous IE6. Si vous appuyez sur ctrl+molette de défilement sur la page, le site Web avec les polices en px ne répondra pas. px est une unité absolue et ne prend pas en charge la mise à l'échelle d'IE, et em est une unité relative.

Lorsque j'ai ajusté ce blog, j'ai découvert que non seulement la police, mais aussi l'espacement des lignes (hauteur de ligne) et les unités de hauteur verticale étaient tous inclus. Garantir l’intégrité lors de la mise à l’échelle.

em a les caractéristiques suivantes : La valeur de

1. em n'est pas fixe ;
2. em héritera de la taille de police de l'élément parent.

étapes de réécriture des em :

1. Déclarez Font-size=62,5% dans le sélecteur de corps ;
2. Divisez votre valeur px d'origine par 10, puis remplacez-la par em comme unité

   Simple, si vous n'en avez besoin que si ; les deux étapes ci-dessus peuvent résoudre le problème, peut-être que personne n'utilisera px. Après les deux étapes ci-dessus, vous constaterez que la taille de la police de votre site Web est étonnamment grande. Étant donné que la valeur de em n'est pas fixe et héritera de la taille de l'élément parent, vous pouvez définir la taille de la police dans le contenu p sur 1,2em, soit 12 px. Ensuite, vous définissez la taille de police du sélecteur p sur 1,2em, mais si p appartient à l'enfant du contenu, la taille de police de p n'est pas 12px, mais 1,2em= 1,2 * 12px=14,4px. En effet, la taille de la police du contenu est définie sur 1,2 em. Cette valeur em hérite de la taille du corps de son élément parent, qui est de 16 px * 62,5 % * 1,2 = 12 px, et p est son enfant, et em hérite de la hauteur de la police de. content , qui fait 12px. Donc 1,2em de p n'est plus 12px, mais 14,4px.

3. Recalculez la valeur em de ces polices agrandies. Évitez les déclarations répétées de taille de police, c'est-à-dire évitez le phénomène 1,2 * 1,2 = 1,44 mentionné ci-dessus. 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 hérite de la police. hauteur de #content. Il est devenu 1em=12px.

   Caractères chinois 12px dans IE :

   J'ai également découvert un phénomène étrange lors de la conversion em, c'est-à-dire que les caractères chinois 12px (1,2em) obtenus par la méthode ci-dessus ne sont pas égaux à la taille de police directement définie par 12px dans IE , mais il est légèrement plus grand. Il vous suffit de changer 62,5 % en 63 % dans le sélecteur de corps et il s'affichera normalement. La raison peut être que lorsque IE traite les caractères chinois, la précision des valeurs à virgule flottante est limitée. Ce phénomène ne se produit que pour les caractères chinois de 12 pixels et n'existe pas en anglais. La solution est de remplacer 62,5% dans style.css par 63%.

Un outil de conversion d'unités px, em, pt :

Adresse : http://pxtoem.com/

2 fonctionnalités rem

    rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

Exemple :

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

Attention:

    选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

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!