L'évolution et l'application des unités de mise en page CSS : des pixels aux unités relatives basées sur la taille de police de l'élément racine

Du px au rem : L'évolution et l'application des unités de mise en page CSS

Introduction :
Dans le développement front-end, nous avons souvent besoin d'utiliser CSS pour implémenter la mise en page. Au cours des dernières années, les unités de mise en page CSS ont évolué et se sont développées. Au départ, nous utilisions les pixels (px) comme unité pour définir la taille et la position des éléments. Cependant, avec l’essor du responsive design et la popularité des appareils mobiles, les unités pixel ont progressivement révélé certains problèmes. Afin de résoudre ces problèmes, la nouvelle unité rem a vu le jour et a été progressivement largement utilisée dans la mise en page CSS.

1. Limitations de l'unité de pixel (px)
1.1 Taille fixe
En tant que première unité largement utilisée, l'unité de pixel a la caractéristique d'une taille fixe dans la mise en page. Cela signifie que lorsque la page est affichée sur différents appareils ou différentes tailles d'écran, la taille de l'unité de pixels ne s'adaptera pas, ce qui entraînera un désordre de la mise en page ou un affichage impossible.

1.2 Problèmes liés aux appareils haute résolution
Avec la popularité des appareils haute résolution, tels que les écrans Retina, les défauts des unités de pixels sont plus évidents. Lorsque des éléments avec des paramètres d'unité de pixel faibles sont affichés sur un appareil haute résolution, cela provoquera une pixellisation ou un affichage flou, affectant l'expérience utilisateur.

1.3 Édition complexe
L'unité de pixels doit être ajustée en fonction de la résolution de l'appareil, ce qui signifie que la densité de pixels des différents appareils doit être prise en compte lors de l'écriture CSS, ce qui augmente la complexité de l'écriture et de la maintenance du code.

2. Introduction à l'unité rem
2.1 Qu'est-ce que rem
rem est une unité relative, qui représente l'unité de taille de police par rapport à l'élément racine (html). Sa taille est relative à la taille de la police de l'élément racine. Lorsque nous définissons la taille de police de l'élément racine sur 16px, 1rem est égal à 16px.

2.2 Avantages de rem

• Mise en page adaptative : l'utilisation des unités rem peut être ajustée de manière adaptative en fonction de la taille de la police de l'élément racine, permettant ainsi des changements de mise en page flexibles sur différents appareils.
• Résoudre le problème des appareils haute résolution : étant donné que rem est une unité relative et n'est pas affecté par la densité de pixels de l'appareil, des effets de disposition cohérents peuvent être obtenus sous différentes résolutions.
• Simplifiez l'écriture de code : l'utilisation d'unités rem peut simplifier l'écriture de code et vous n'avez plus besoin de prendre en compte la densité de pixels des différents appareils.

3. Comment utiliser les unités rem
3.1 Définir la taille de la police de l'élément racine
Avant d'utiliser les unités rem, vous devez d'abord définir la taille de la police de l'élément racine. Normalement, nous définirons la taille de police de l'élément racine sur 16px, c'est-à-dire 1rem=16px.

html {
  font-size: 16px;
}

3.2 Utilisation des unités rem
Une fois que vous avez défini la taille de la police de l'élément racine, vous pouvez utiliser les unités rem dans d'autres éléments pour la mise en page.

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

4. Changez dynamiquement la taille de la police de l'élément racine
4.1 Requête multimédia
La requête multimédia peut modifier dynamiquement la taille de la police de l'élément racine en fonction des différentes tailles d'écran.

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

4.2 Calcul dynamique JavaScript
Utilisez JavaScript pour calculer dynamiquement la taille de la police de l'élément racine en fonction de la taille de l'écran.

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

5. Résumé
En utilisant des unités rem, nous pouvons implémenter une mise en page réactive et résoudre des problèmes de mise en page sur différents appareils. L'utilisation d'unités rem peut rendre notre mise en page plus flexible et adaptative, tout en simplifiant l'écriture de code. Dans les projets réels, nous devons choisir les unités de disposition appropriées en fonction des besoins réels et utiliser les unités rem de manière rationnelle pour obtenir une meilleure expérience utilisateur.

Références :

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size
• https://www.w3schools.com/cssref/css_units.asp
• https https://juejin.cn/post/6844904117648772110

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!