La distinction entre les unités de polices CSS et la mise en œuvre de la réactivité des polices

Ce qui suit est une explication détaillée de la distinction entre les unités de police CSS et la mise en œuvre de polices réactives. Le contenu est assez bon, j'aimerais le partager avec vous maintenant et le donner comme référence.

Scénario de problème :

Dans le processus de mise en œuvre d'une mise en page réactive, comment définir la taille de la police dans différentes tailles de fenêtre et différents Lisibilité des appareils mobiles ?

Ce que vous devez savoir sont :

1. La relation de conversion entre px, em, pt
1em = 16px
1px = 1/16 em = 0,0625em

////Les éléments suivants sont moins utilisés //////
1em = 12pt
1px = 3/4 pt = 0,75pt
1pt = 1/12 em 0.0833em
1pt = 4/3 px = 1.3333px

2. La police par défaut de tout navigateur est 16px. La taille par défaut de tous les navigateurs non ajustés est 1em=16px

3. Chrome force la police minimale à être de 12px Même si elle est définie sur 10px, elle sera finalement affichée à 12px. Cela explique pourquoi parfois la taille de la police dans ie ou mozllia est différente de celle dans chrome

4 Quelle est la différence entre px, em, rem vw, vh, vmin ?

px :

unité relative. Par rapport à la résolution de l'écran. C’est pourquoi plus la résolution est élevée, plus la taille de la police est petite. Alors, quels sont les avantages et les inconvénients du px ?

Avantages : relativement stable et précis.

Inconvénients : Si la page est mise à l'échelle, la lisibilité du texte sera affectée. Ce problème peut être résolu en utilisant em comme unité de police.

em :

unité relative. La mise à l'échelle de la taille de la police en fonction de la valeur de base est une valeur relative et non une valeur spécifique. La valeur de base dépend de la taille de police définie par l'élément parent. Si l'élément parent ne définit pas la taille de la police, recherchez vers le haut jusqu'au nœud racine.

Avantages : compense les lacunes de px

Inconvénients : trop de dépendance à l'égard des nœuds parents, sujets à des déclarations répétées de taille de police.

rem:

Unité relative. La taille de la police par rapport au nœud racine HTML.

Inconvénients : évite la dépendance des em à la taille de la police de l'élément parent

Avantages : il n'y a qu'un seul système de référence, la taille de la police du nœud racine

<SPAN style="FONT-SIZE: 16px">html{font-size:100%}    
//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1rem;} }    
@media (min-width:960px) { body {font-size:1.2rem;} }    
@media (min-width:1100px) { body {font-size:1.5rem;} }    
</SPAN>

5 Pourquoi la police du nœud racine. La taille doit être réglée à 62,5 % ?

Comme mentionné ci-dessus, la taille de police par défaut du navigateur est de 16 px. Que faire si vous souhaitez définir la taille de police sur 12, 14 et 18 px sous différentes tailles de page ?

Doit-on utiliser 12/16 rem, 14/16rem, 18/16rem pour calculer la taille relative des polices ?

Un moyen plus simple consiste à utiliser le nœud racine Set la taille de la police à 10 px, afin qu'elle puisse être écrite directement en 1,2rem, 1,4rem, 1,8rem dans les médias. Si le nœud racine est défini sur 10 px, la taille de police par défaut du navigateur est font-size : 10/16 %, c'est-à-dire font-size : 62,5%

<SPAN style="FONT-SIZE: 16px">html{font-size:10px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:1m=1.2 rem;font-size:12px;  /某些浏览器不支持rem/} }    
@media (min-width:960px)  { body {font-size:1.4 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:1.8 rem; font-size:18px; /*同上*/} }    
</SPAN>

<SPAN style="FONT-SIZE: 16px">html{font-size:16px}    

//响应式的字体大小相对于根节点变化    
@media (min-width: 640px) { body {font-size:12/16 rem;font-size:12px;  /某些浏览器不支持rem，需要再次使用px 声明font-size/} }    
@media (min-width:960px)  { body {font-size:14/16 rem; font-size:14px; /*某些浏览器不支持rem，需要再次使用px声明font-size*/} }    
@media (min-width:1100px) { body {font-size:18/16 rem; font-size:18px; /*同上*/} }    
</SPAN>

Ce qui précède C'est tout le contenu de cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Code pour forcer les sauts de ligne de mots anglais à l'aide de CSS

css La couche de masque implémentée par div est compatible avec les navigateurs IE6-IE9 et FireFox

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!