Guide des propriétés des unités CSS : em, rem, px et vw/vh

Guide des attributs d'unité CSS : em, rem, px et vw/vh

Lors de l'écriture de styles CSS, il est très important de choisir l'attribut d'unité approprié. Cet article présentera plusieurs attributs d'unité couramment utilisés : em, rem, px et vw/vh, et fournira des exemples de code spécifiques.

1. em
   em (unité de taille de police) est une unité relative à la taille de police de l'élément parent. Si la taille de police de l'élément parent est de 16 px, 1em est égal à 16 px. Lorsque em est utilisé pour d'autres attributs (tels que la largeur, la hauteur, etc.), il s'agit également d'une valeur proportionnelle à la taille de la police de l'élément parent.

Exemple de code :

.parent {
  font-size: 16px;
}

.child {
  font-size: 1em; /* 等同于16px */
  width: 2em; /* 等同于32px */
  height: 3em; /* 等同于48px */
}

2. rem
   rem (unité de taille de police de l'élément racine) est une unité relative à la taille de police de l'élément racine (généralement un élément HTML). Contrairement à em, la base de rem est la taille de police de l'élément racine. Si la taille de police de l'élément racine est de 16 px, 1rem est égal à 16 px. rem convient à la partie mise en page et peut facilement ajuster la proportion de la page entière.

Exemple de code :

html {
  font-size: 16px;
}

.child {
  font-size: 1rem; /* 等同于16px */
  width: 2rem; /* 等同于32px */
  height: 3rem; /* 等同于48px */
}

3. px
   px (unité de pixel) est l'unité la plus courante et elle a une longueur fixe. px convient aux situations où un contrôle précis de la taille est requis.

Exemple de code :

.child {
  font-size: 16px;
  width: 32px;
  height: 48px;
}

4. vw/vh
   vw (unité de largeur de la fenêtre) et vh (unité de hauteur de la fenêtre) sont des unités relatives à la largeur et à la hauteur de la fenêtre. La fenêtre d'affichage fait référence à la largeur et à la hauteur de la zone visible du navigateur. vw représente le pourcentage de la largeur de la fenêtre et vh représente le pourcentage de la hauteur de la fenêtre. Utilisez les unités vw/vh pour redimensionner automatiquement les éléments en fonction de la taille de la fenêtre du navigateur.

Exemple de code :

.child {
  font-size: 5vw; /* 视口宽度的5% */
  width: 30vw; /* 视口宽度的30% */
  height: 40vh; /* 视口高度的40% */
}

Résumé :
Le choix des attributs d'unité appropriés est très important pour écrire des styles CSS flexibles et adaptables à différents écrans. em et rem conviennent aux tailles relatives, px convient aux tailles fixes et vw/vh convient aux tailles adaptatives. Choisir les attributs d'unité appropriés en fonction de la situation spécifique peut améliorer l'affichage de la page Web sur différents appareils et écrans.

Ce qui précède est un guide sur les propriétés des unités CSS, j'espère qu'il vous sera utile.

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!