compréhension approfondie des unités REM dans CSS: une unité relativement grande avec une excellente compatibilité du navigateur et apprendre à les utiliser efficacement.
Points clés
Qu'est-ce qu'une unité REM?
Dans CSS, REM signifie "Root EM", qui est une unité de mesure qui représente la taille de la police de l'élément racine. Cela signifie que 1REM est égal à la taille de la police de l'élément HTML, et pour la plupart des navigateurs, la valeur par défaut est 16px. L'utilisation de REM peut aider à garantir la cohérence de la taille des polices et de l'espacement dans toute l'interface utilisateur.
Selon la spécification W3C, la définition d'une unité REM est:
est égal à la valeur calculée de la taille de la police sur l'élément racine. Lorsqu'il est spécifié sur la propriété de taille de police de l'élément racine, l'unité REM fait référence à la valeur initiale de la propriété.
Unités REM et unités EM
La différence entre les unités REM et les unités EM est que la taille de la police des unités EM par rapport à son propre élément, et non à l'élément racine. Par conséquent, ils peuvent en cascade et conduire à des résultats inattendus. Examinons l'exemple suivant, nous voulons que la liste ait une taille de police de 12px, au cas où la taille de la police racine est le 16px par défaut:
<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>Si nous avons une liste imbriquée dans une autre liste, la taille de la police de la liste interne sera de 75% de sa taille de parent (9px dans ce cas). Nous pouvons toujours surmonter ce problème en utilisant quelque chose comme:
<code>ul ul {font-size: 1em;}</code>Cela fonctionne, mais nous devons toujours prêter une grande attention à la situation de nidification plus profonde.
Avec l'unité REM, les choses sont beaucoup plus simples:
<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>Étant donné que toutes les tailles se réfèrent à la taille de la police racine, il n'est plus nécessaire de gérer les cas de nidification dans des déclarations distinctes.
Utilisez des unités REM pour le redimensionnement de la taille des polices
L'un des pionniers de la redimensionnement de la taille des polices à l'aide d'unités REM était Jonathan Snook, qui a publié un article sur le redimensionnement de la taille des polices en utilisant REM en mai 2011. Comme de nombreux autres développeurs CSS, il doit faire face aux problèmes rencontrés par les unités EM dans des dispositions complexes.
À ce moment-là, les versions plus anciennes de IE avaient toujours une grande part de marché, et ils ne pouvaient pas mettre à l'échelle du texte en utilisant la taille des pixels. Cependant, comme nous l'avons vu plus tôt, il est facile d'ignorer la nidification et d'obtenir des résultats inattendus en utilisant des unités EM.
Le principal problème avec l'utilisation de REM pour le redimensionnement de la taille des polices est que ces valeurs ne sont pas très pratiques à utiliser. Examinons un exemple de certaines tailles de police communes exprimées dans les unités REM, bien sûr, en supposant que la taille de la base est de 16px:
Comme nous pouvons le voir, ces valeurs ne sont pas pratiques pour faire des calculs. Snook utilise donc une technique appelée "62,5%. Ce n'est en aucun cas une nouvelle découverte, car elle a été utilisée dans les unités EM:
<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>La solution de Snook devient:
Étant donné que l'unité REM est relative à l'élément racine, la solution de Snook devient:<code>ul ul {font-size: 1em;}</code>Nous devons également considérer d'autres navigateurs qui ne prennent pas en charge REM. Ainsi, le code ci-dessus est réellement écrit comme ceci:
<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>Bien que cette solution semble être proche du statut de la "règle d'or", certaines personnes recommandent de ne pas l'utiliser aveuglément. Harry Roberts a écrit sa propre opinion sur l'utilisation des unités REM. À son avis, alors que la solution de 62,5% facilite le calcul (car la taille de la police en PX est 10 fois sa valeur REM), il oblige finalement les développeurs à réécrire explicitement toutes les tailles de police de leur site Web.
La troisième vue vient de Chris Coyier de CSS-Tricks. Sa solution utilise les trois unités que nous rencontrons actuellement. Il conserve la taille de la racine définie dans PX, les modules définis dans les unités REM et les éléments dans les modules dans les unités EM. Cette approche facilite la manipulation de la taille globale, qui évolue les types dans le module, tandis que le contenu du module est mis à l'échelle en fonction de la taille de la police du module lui-même. Louis Lazaris a par la suite discuté de ce concept dans "le pouvoir des unités EM dans CSS".
Dans l'exemple suivant, vous pouvez voir à quoi ressemble la méthode de Chris:
[Codepen Exemple de lien - Le code intégré de Codepen doit être inséré ici, mais comme je ne peux pas accéder au site Web externe, je ne peux pas le fournir. ]
Dans la pratique, les principaux cadres comme Bootstrap 4 et Guide de conception de matériaux utilisent des unités REM pour redimensionner le contenu du texte.
Celui qui doit être mentionné en particulier est Material-UI, qui est une collection très populaire de composants React. Non seulement ils redimensionnent le texte de la même manière, mais ils fournissent également un mécanisme pour réaliser la «simplification 10px» que nous avons mentionnée plus tôt.
Un autre projet récent, chaque mise en page, combine les unités EM et REM d'une manière très créative. Il est le plus proche de la vue d'ensemble du modèle susmentionné de Chris Coyier et il utilise des unités EM pour souligner les éléments en ligne tels que les icônes SVG, les portées ou d'autres éléments similaires.
Comme vous pouvez le voir, il n'y a pas de solution "polyvalente". Les combinaisons possibles ne sont limitées que par l'imagination du développeur.
Utiliser Rems
dans les points d'arrêt des requêtes multimédiasL'utilisation des unités EM ou REM dans les requêtes médiatiques est étroitement liée au concept de "meilleur président" et à son impact sur l'expérience en lecture. Smashing Magazine a publié un article de recherche complet sur la composition du Web, intitulé "La taille est importante: longueur de ligne équilibrée et taille de police dans la conception Web réactive". Parmi de nombreuses autres choses intéressantes, l'article donne une estimation de la meilleure durée de ligne: entre 45 et 75-85 caractères (y compris les espaces et la ponctuation), où 65 est la valeur cible "idéale".
En utilisant une estimation approximative de 1Rem = 1 caractères, nous pouvons contrôler le flux de texte du contenu de colonne unique, en utilisant une approche mobile-amenée:
<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>Cependant, lorsqu'ils sont utilisés comme unités dans les requêtes multimédias, les unités REM et EM ont un détail intéressant: ils conservent toujours la même valeur de 1Rem = 1EM = la taille de la police définie par le navigateur. La raison de ce comportement est expliquée dans la spécification de la requête médiatique (en surbrillance):
Les unités relatives des requêtes multimédias sont basées sur la valeur initiale, ce qui signifie que les unités ne sont jamais basées sur le résultat déclaré. Par exemple, dans HTML, l'unité EM par rapport à la valeur initiale de la taille de la police est définie par l'agent utilisateur ou les préférences de l'utilisateur, plutôt que n'importe quel style de la page.
Jetons un coup d'œil à un exemple de ce comportement:
[Codepen Exemple de lien - Le code intégré de Codepen doit être inséré ici, mais comme je ne peux pas accéder au site Web externe, je ne peux pas le fournir. ]
Tout d'abord, dans notre HTML, nous avons un élément où nous rédigerons la largeur de la fenêtre:
<code>ul ul {font-size: 1em;}</code>Ensuite, nous avons deux requêtes multimédias, l'une utilisant des unités REM et l'autre à l'aide d'unités EM (cela utilise Sass pour la simplicité):
<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>Enfin, nous utilisons du jQuery pour afficher la largeur de la fenêtre sur la page et mettre à jour la valeur lorsque la taille de la fenêtre change:
<code>body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */</code>Nous commençons par l'astuce de 62,5% pour montrer que la taille de la police racine modifiée n'a aucun effet sur les valeurs utilisées dans la requête multimédia. Lorsque nous modifions la largeur de la fenêtre du navigateur, nous pouvons voir que la première requête multimédia commence à 320px (20 × 16px) et que la deuxième requête multimédia commence à 480px (30 × 16px). Le changement de taille de police que nous avons déclaré n'a aucun effet sur les points d'arrêt. La seule façon de modifier la valeur de point d'arrêt de la requête multimédia est de modifier la taille de la police par défaut dans les paramètres du navigateur.
Par conséquent, il n'y a en fait aucune différence entre l'utilisation d'unités EM ou REM dans les points d'arrêt de la requête multimédia. Zurb Foundation (actuellement V6.5.3 au moment de la rédaction) utilise des unités EM dans les requêtes multimédias.
Pursuit d'accessibilité
Nous avons vu ci-dessus que la capacité de mettre à l'échelle en fonction de la taille de la police racine rend les unités REM très utiles pour l'accessibilité. Les développeurs Google recommandent d'utiliser des unités relatives pour le redimensionnement du texte.
Le personnel derrière les archives Internet a mené une étude empirique et les résultats ont montré qu'un grand nombre d'utilisateurs modifient la taille de la police par défaut dans leurs paramètres de navigateur. En utilisant REM et d'autres unités relatives, vous pouvez respecter les décisions des utilisateurs sur la façon dont ils souhaitent parcourir le Web.
Documents de mise à l'échelle à l'aide d'unités REM
La troisième utilisation que nous pouvons trouver pour les unités REM consiste à construire des composants évolutifs. En représentant la largeur, les marges et le rembourrage dans les unités REM, vous pouvez créer des interfaces qui se développent ou rétrécissent de manière synchrone avec la taille de la police racine. Voyons comment cette chose fonctionne en utilisant plusieurs exemples.
[Codepen Exemple de lien 1 - Le code embarqué de Codepen doit être inséré ici, mais comme je ne peux pas accéder au site Web externe, je ne peux pas le fournir. ]
[Codepen Exemple Lien 2 - Le code intégré de Codepen doit être inséré ici, mais comme je ne peux pas accéder au site Web externe, je ne peux pas le fournir. ]
Conclusion
Nous terminons notre rencontre avec l'unité REM CSS ici. Il est évident qu'il existe de nombreux avantages à utiliser ces unités dans notre code, telles que la réactivité, l'évolutivité, une expérience de lecture améliorée et une plus grande flexibilité de définition des composants. Les unités REM ne sont pas une solution universelle universelle, mais avec un déploiement minutieux, ils peuvent résoudre bon nombre des problèmes qui ont tourmenté les développeurs depuis des années. Cela dépend de chacun de nous pour débloquer le plein potentiel des REM. Lancez votre éditeur, effectuez des expériences et partagez vos résultats avec le reste d'entre nous.
Pour plus d'informations sur les unités de taille CSS, voir:
Bien sûr, REM n'est pas la seule unité CSS disponible. Consultez notre aperçu de l'unité de taille CSS.
FAQ sur Rem dans CSS
La principale différence entre les unités REM et EM dans CSS est qu'elles calculent le point de référence de la taille. La taille de la police de l'unité EM par rapport à son élément parent le plus proche. Si vous nichez les éléments, chaque niveau peut avoir des tailles de police différentes en fonction de la taille de son parent, ce qui entraîne une taille composée. D'un autre côté, REM signifie "Root Em". Il n'est que par rapport à l'élément racine (HTML), ce qui le rend cohérent dans le document. Cela rend les unités REM plus faciles à prévoir et à gérer dans les grands fichiers CSS.
Pour convertir les pixels en unités REM, vous devez connaître la taille de la police de base du document, généralement 16px (la taille par défaut de la plupart des navigateurs). La formule de conversion est: Valeur du pixel cible / Font de référence Taille = Valeur REM. Par exemple, si vous voulez une taille de police de 24px, la valeur équivalente en REM est 24px / 16px = 1,5rem.
Oui, les unités REM peuvent être utilisées pour n'importe quel attribut CSS qui nécessite une valeur de longueur, pas seulement pour la taille de la police. Cela comprend des propriétés telles que la largeur, la hauteur, le rembourrage, la marge et la hauteur de ligne. L'utilisation d'unités REM pour ces propriétés peut aider à maintenir l'espacement proportionnel et la disposition sur différentes tailles d'écran.
Oui, tous les navigateurs modernes prennent en charge largement les unités REM, y compris Chrome, Firefox, Safari, Edge et Internet Explorer 9 et plus tard. Cependant, pour les navigateurs plus anciens qui ne prennent pas en charge les unités REM, vous pouvez fournir un replat pixel.
Les unités REM sont très bénéfiques pour la conception réactive. Étant donné que REM est relatif à l'élément racine, la modification de la taille de la police racine vous permet de redimensionner tous les éléments définis dans REM. Cela peut être fait dans les requêtes multimédias, permettant à différentes tailles de police de fournir différentes tailles d'écran, ce qui rend votre conception réactive.
L'utilisation d'unités REM peut améliorer considérablement l'accessibilité de votre site Web. Certains utilisateurs peuvent ajuster la taille de la police par défaut de leurs navigateurs pour une plus grande lisibilité. Étant donné que l'unité REM est relative à cette taille de police de référence, il permet à la disposition et à l'espacement de votre site Web de s'ajuster en fonction des préférences des utilisateurs, en améliorant l'expérience utilisateur globale.
Vous pouvez remplacer les styles définis dans les unités REM en utilisant la spécificité CSS ou! Règles importantes. Cependant, il est recommandé d'utiliser ces méthodes avec prudence et de construire votre CSS d'une manière qui minimise le besoin de couverture.
Oui, les unités REM peuvent être utilisées en combinaison avec d'autres unités telles que des pixels ou des pourcentages. Cela peut offrir une plus grande flexibilité pour votre conception. Par exemple, vous pouvez utiliser des pixels pour la largeur des bordures (pas besoin de mettre à l'échelle avec la taille du texte) et des unités REM pour le remplissage (nécessaire).
La taille de la police de base de l'unité REM est définie à l'aide de la propriété de taille de police sur l'élément racine (HTML). Par exemple, si vous voulez que la taille de la police de référence soit 10px, vous pouvez utiliser: html {Font-Size: 10px;}. Toutes les unités REM seront alors relatives à cette taille.
Les meilleures pratiques pour l'utilisation des unités REM dans CSS comprennent: la définition d'une taille de base raisonnable sur l'élément racine; Différentes tailles de police pour s'assurer qu'elle reste accessible et équilibrée visuellement.
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!
emplacement.hash
qu'est-ce que le moteur de recherche
touche de raccourci de courbe ps
Utilisation de parseInt en Java
Les pièces d'inscription Sols reviendront-elles à zéro ?
Quelle est la commande cmd pour nettoyer les fichiers indésirables du lecteur C ?
Comment activer le système de version professionnelle Win7
Windows ne peut pas accéder à l'ordinateur partagé
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
