Quelles sont les unités couramment utilisées pour les polices en CSS ?

Les unités couramment utilisées pour les polices en CSS sont : 1. px (pixel), qui est une unité de taille fixe ; 2. em, une unité de longueur relative, qui est relative à la taille de la police de l'élément parent. ; 3. rem, qui est une unité de longueur relative, est la taille de la police par rapport au nœud racine (ou nœud html) ; 4. %, unité de longueur relative, par rapport à l'élément parent ;

L'environnement d'exploitation de ce tutoriel : Système Windows 10, CSS3, cet article est applicable à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel vidéo CSS"

1. Les unités de polices couramment utilisées en CSS sont px, em, rem et %<.>

1. px (pixel)

Le nom de l'unité px est pixel, c'est une unité de taille fixe, et le calcul de le pixel est pour l'écran (ordinateur/téléphone portable), un pixel (1px) est un point sur l'écran (ordinateur/téléphone portable), c'est-à-dire la division minimale de la résolution de l'écran. Puisqu'il s'agit d'une unité de taille fixe, si une page Web conçue avec elle seule est adaptée à un grand écran (ordinateur), elle sera très peu conviviale sur un petit écran (téléphone portable) et ne pourra pas obtenir l'effet adaptatif.

Exemple :

nbsp;html>

 
  <meta> 
  <title>css px像素固定长度单位</title> 
  <style>
    body{background-color: #aaa;}
   .px{border:1px solid red;width:300px;height:100px;font-size:30px;}
  </style>
 
  
  <div>
   用px单位设置元素的宽高和文本的字体大小
  </div> 
 

Résultat de l'exécution :

em (unité de longueur relative)

L'unité em est également utilisée plus souvent, notamment à l'étranger ; le nom de l'unité em est l'unité de longueur relative, qui est utilisée pour définir la taille de la police du texte, par rapport à la taille de la police du texte dans le parent. element object ; s'il n'y a pas d'artificiel. Définit la taille de police du texte dans l'objet actuel, elle est donc relative à la taille de police par défaut du navigateur (16 px).

Exemple :

nbsp;html>

 
  <meta> 
  <title>用em相对长度单位来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
    .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
    .em{font-size:0.5em;}/*30px x 0.5 = 15px*/
  </style>
 
  
  <div>
   <span>用em相对长度单位来设置文本的字体大小</span>
  </div> 
 

Résultat d'exécution :

Explication : L'exemple ci-dessus em est relatif à l'élément parent div et au div est défini La taille de la police est de 30 px, donc la taille de police calculée de 0,5 em est : 30 px x 0,5 = 15 px

3 rem (nouvelle unité de longueur relative en CSS3)<.> Rem est une nouvelle unité de longueur relative dans CSS3. Elle semble résoudre les défauts de em. On peut dire que Em est la taille de la police par rapport à l'élément parent. Lorsque la taille de la police de l'élément parent change, elle doit être recalculée. . L’émergence de rem peut résoudre de tels problèmes uniquement par rapport au nœud racine, qui est l’élément HTML. Ainsi, tant que la taille de police est définie sur la balise html, la taille de police dans le document sera basée sur cette norme de référence, qui est généralement utilisée pour une mise en page adaptative.

nbsp;html>

 
  <meta> 
  <title>用css3新增的相对长度单位rem来设置文本的字体大小</title> 
  <style>
    body{background-color: #aaa;}
   .div{border:1px solid red;width:300px;height:100px;font-size:30px;}
   .rem{font-size:0.5rem;}/*16px x 0.5 = 8px*/ 
</style>
 
  
  <div>
   <span>用rem相对长度单位来设置文本的字体大小</span>
  </div> 
 

Remarque : rem est relatif à l'élément html de l'élément racine. La taille de police par défaut des navigateurs est généralement de 16 px. La taille de police calculée de tous les 0,5rem est : 16px x. 0,5 = 8px, ce qui n'a rien à voir avec les 30px fixés par l'élément parent

4 % (pourcentage)

% est également très courant, c'est presque. le même que em, tous deux relatifs à l'élément parent. Mais % peut être utilisé dans de nombreux attributs, tels que : la largeur, la hauteur, la taille de la police, etc. Em est l'unité utilisée pour définir la taille de la police (font-size). Les propriétés telles que la largeur et la hauteur n'ont pas d'unité em.

2. La différence et le résumé de px, em, rem et %

Px est une unité de longueur fixe et ne varie pas Les changements avec les changements dans d'autres éléments ;
em et % sont des unités relatives à l'élément parent et changeront avec les changements dans les attributs de l'élément parent (taille de police ou autres attributs );
rem est relatif au répertoire racine (élément HTML), il changera donc avec l'attribut (font-size) de l'élément HTML

• px et % sont plus largement utilisés et peuvent servir d'unités pour plus d'attributs, tandis que em et rem sont des unités pour la taille de la police et sont utilisés comme unités pour l'attribut font-size

• D'une manière générale : 1em = 1rem = 100 % = 16 px

• Pour plus de connaissances liées à la programmation, veuillez visiter :
Vidéo de programmation

 ! !

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!