Je voudrais féliciter la réponse de josh3736 pour avoir fourni un excellent contexte historique. Bien qu'il soit bien articulé, le paysage CSS a changé en près de cinq ans depuis que cette question a été posée. Lorsque cette question a été posée, px était la bonne réponse, mais cela n'est plus vrai aujourd'hui.
tl; dr: utiliserrem
Présentation de l'unité
Historiquement, les pxunités représentaient généralement un pixel de périphérique. Avec des appareils ayant une densité de pixels de plus en plus élevée, cela ne s'applique plus à de nombreux appareils, comme avec l'écran Retina d'Apple.
remunités représentent la r OOT em taille. C'est le font-sizede n'importe quel match :root. Dans le cas du HTML, c'est l' <html>élément; pour SVG, c'est l' <svg>élément. La valeur font-sizepar défaut dans chaque navigateur * est 16px.
Au moment de la rédaction, rem est pris en charge par environ 98% des utilisateurs . Si vous vous inquiétez de ces 2% supplémentaires, je vous rappelle que les requêtes multimédias sont également prises en charge par environ 98% des utilisateurs .
Sur l'utilisation px
La majorité des exemples CSS sur Internet utilisent px valeurs car ils étaient la norme de facto. pt, inet une variété d'autres unités auraient pu être utilisées en théorie, mais elles ne géraient pas bien les petites valeurs car vous auriez rapidement besoin de recourir à des fractions, qui étaient plus longues à taper et plus difficiles à raisonner.
Si vous vouliez une fine bordure, avec px vous pourriez utiliser 1px, avec ptvous auriez besoin d'utiliser 0.75ptpour des résultats cohérents, et ce n'est tout simplement pas très pratique.
Sur l'utilisation rem
remLa valeur par défaut de 16pxn'est pas un argument très fort pour son utilisation. L'écriture 0.0625remest pire que l'écriture 0.75pt, alors pourquoi utiliser quelqu'un rem?
Il y a deux parties à rem l'avantage des autres unités.
- Les préférences des utilisateurs sont respectées
- Vous pouvez changer la
pxvaleur apparente de remce que vous souhaitez
Respect des préférences des utilisateurs
Le zoom du navigateur a beaucoup changé au fil des ans. Historiquement, de nombreux navigateurs ne pouvaient évoluerfont-size faisaient , mais cela a changé assez rapidement lorsque les sites Web ont réalisé que leurs magnifiques conceptions parfaites en pixels se cassaient à chaque fois que quelqu'un faisait un zoom avant ou arrière. À ce stade, les navigateurs redimensionnent la page entière, de sorte que le zoom basé sur les polices est hors de l'image.
Le respect des souhaits d'un utilisateur n'est pas hors de propos. Ce 16pxn'est pas parce qu'un navigateur est défini par défaut que n'importe quel utilisateur ne peut pas changer ses préférences pour 24pxou 32pxpour corriger la basse vision ou la mauvaise visibilité (ex éblouissement de l'écran). Si vous basez vos unités sur rem, n'importe quel utilisateur avec une taille de police plus élevée verra un site proportionnellement plus grand. Les bordures seront plus grandes, le rembourrage sera plus grand, les marges seront plus grandes, tout augmentera de manière fluide.
Si vous basez vos requêtes sur les médias rem, vous pouvez également vous assurer que le site que voient vos utilisateurs correspond à leur écran. Un utilisateur font-sizeconfiguré 32pxsur un 640pxlarge navigateur verra efficacement votre site comme indiqué à un utilisateur 16pxsur un 320pxlarge navigateur. Il n'y a absolument aucune perte pour RWD en utilisantrem .
Modification de la pxvaleur apparente
Parce que remest basé sur le font-sizedu :rootnoeud, si vous voulez changer ce qui 1remreprésente, tout ce que vous avez à faire est de changer le font-size:
:root {
font-size: 100px;
}
body {
font-size: 1rem;
}
<p>Don't ever actually do this, please</p>
Quoi que vous fassiez, ne définissez pas l' :rootélément font-sizesur une pxvaleur.
Si vous réglez le font-sizesur htmlunpx valeur, vous avez effacé les préférences de l'utilisateur sans moyen de les récupérer.
Si vous souhaitez modifier la valeur apparente de rem, utilisez les %unités.
Le calcul est assez simple.
La taille de police apparente de :rootest 16px, mais disons que nous voulons la changer 20px. Tout ce que nous devons faire est de multiplier 16par une certaine valeur pour obtenir 20.
Configurez votre équation:
16 * X = 20
Et résolvez pour X:
X = 20 / 16
X = 1.25
X = 125%
:root {
font-size: 125%;
}
<p>If you're using the default font-size, I'm 20px tall.</p>
Tout faire en multiples 20n'est pas si bien, mais une suggestion courante est de rendre la taille apparente remégale à 10px. Le nombre magique pour 10/16qui est 0.625, ou 62.5%.
:root {
font-size: 62.5%;
}
<p>If you're using the default font-size, I'm 10px tall.</p>
Le problème est maintenant que votre défaut font-sizepour le reste de la page est beaucoup trop petit, mais il y a une solution simple pour cela: Définissez un font-sizesur l' bodyutilisation rem:
:root {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
<p>I'm the default font-size</p>
Il est important de noter que, avec cet ajustement en place, la valeur apparente de remest 10pxce qui signifie que toute valeur dans laquelle vous pourriez avoir écrit pxpeut être convertie directement remen sautant une décimale.
padding: 20px;
se transforme en
padding: 2rem;
La taille de police apparente que vous choisissez dépend de vous, donc si vous le souhaitez, vous ne pouvez pas utiliser de raison:
:root {
font-size: 6.25%;
}
body {
font-size: 16rem;
}
et ont 1remégal 1px.
Alors voilà, une solution simple pour respecter les souhaits des utilisateurs tout en évitant de trop compliquer votre CSS.
Attendez, alors quel est le piège?
J'avais peur que vous vous posiez la question. Autant je voudrais prétendre que remc'est magique et résout tout, il y a encore quelques problèmes à noter. Rien de révolutionnaire à mon avis , mais je vais les appeler pour que vous ne puissiez pas dire que je ne vous ai pas prévenu.
Requêtes médias (utilisation em)
L'un des premiers problèmes que vous rencontrerez remconcerne les requêtes des médias. Considérez le code suivant:
:root {
font-size: 1000px;
}
@media (min-width: 1rem) {
:root {
font-size: 1px;
}
}
Ici, la valeur des remchangements dépend de l'application de la requête multimédia et de la requête multimédia dépend de la valeur de rem, alors qu'est-ce qui se passe?
remdans les requêtes multimédias utilise la valeur initiale de font-sizeet ne doit pas (voir la section Safari) prendre en compte les modifications qui pourraient avoir eu lieu sur font-sizel' :rootélément. En d'autres termes, sa valeur apparente est toujours 16px .
C'est un peu ennuyeux, car cela signifie que vous devez faire des calculs fractionnaires, mais j'ai constaté que la plupart des requêtes multimédias courantes utilisent déjà des valeurs multiples de 16.
| px | rem |
+------+-----+
| 320 | 20 |
| 480 | 30 |
| 768 | 48 |
| 1024 | 64 |
| 1200 | 75 |
| 1600 | 100 |
De plus, si vous utilisez un préprocesseur CSS, vous pouvez utiliser des mixins ou des variables pour gérer vos requêtes multimédias, ce qui masquera entièrement le problème.
Safari
Malheureusement, il existe un bogue connu avec Safari où les modifications de la :roottaille de police modifient réellement les remvaleurs calculées pour les plages de requêtes multimédias. Cela peut provoquer un comportement très étrange si la taille de police de l' :rootélément est modifiée dans une requête multimédia. Heureusement, la solution est simple: utilisez des emunités pour les requêtes multimédias .
Changement de contexte
Si vous basculez entre différents projets, différents projets, il est fort possible que la taille de police apparente de remait des valeurs différentes. Dans un projet, vous pouvez utiliser une taille apparente de l' 10pxendroit où dans un autre projet la taille apparente peut être 1px. Cela peut prêter à confusion et provoquer des problèmes.
Ma seule recommandation ici est de s'en tenir 62.5%à une conversion remen une taille apparente de 10px, car cela a été plus courant dans mon expérience.
Bibliothèques CSS partagées
Si vous écrivez du CSS qui va être utilisé sur un site que vous ne contrôlez pas, comme pour un widget intégré, il n'y a vraiment aucun bon moyen de savoir quelle taille apparente remaura. Si tel est le cas, n'hésitez pas à continuer à utiliser px.
Si vous souhaitez toujours l'utiliser rem, envisagez de publier une version Sass ou LESS de la feuille de style avec une variable pour remplacer la mise à l'échelle de la taille apparente de rem.
* Je ne veux pas empêcher quiconque d'utiliser rem, mais je n'ai pas pu confirmer officiellement que chaque navigateur utilise 16pxpar défaut. Vous voyez, il y a beaucoup de navigateurs et il ne serait pas si difficile pour un navigateur d'avoir divergé si légèrement vers, disons 15pxou 18px. En test, cependant, je n'ai pas vu un seul exemple où un navigateur utilisant les paramètres par défaut dans un système utilisant les paramètres par défaut avait une valeur autre que 16px. Si vous trouvez un tel exemple, veuillez le partager avec moi.
