web-dev-qa-db-fra.com

Devrais-je utiliser des unités px ou rem dans mes CSS?

Je conçois un nouveau site Web et je souhaite qu'il soit compatible avec le plus grand nombre de navigateurs et de paramètres de navigateur possible. J'essaie de décider quelle unité de mesure je devrais utiliser pour la taille de mes polices et de mes éléments, mais je suis incapable de trouver une réponse concluante.

Ma question est: devrais-je utiliser px ou rem dans mon CSS?

  • Jusqu'à présent, je sais que l'utilisation de px n'est pas compatible avec les utilisateurs qui ajustent la taille de la police de base dans leur navigateur.
  • J'ai négligé les ems parce qu'ils sont plus fastidieux à maintenir, par rapport à rems, car ils sont en cascade.
  • Certains disent que rems sont indépendants de la résolution et donc plus souhaitables. Mais d’autres disent que les navigateurs les plus modernes zooment de la même manière sur tous les éléments, donc utiliser px n’est pas un problème.

Je pose cette question car il existe de nombreuses opinions divergentes sur la mesure de distance la plus souhaitable en CSS, et je ne suis pas certain de la meilleure solution.

htmlcsscss3distanceunits-of-measurement
337
user1218247

TL; DR: utilisez px.

Les faits

  • Premièrement, il est extrêmement important de savoir que selon la spécification , l'unité CSS px ne correspond pas à un affichage physique. pixel. Cela a toujours été toujours vrai - même en 1996 CSS 1 spec .

    CSS définit le pixel de référence , qui mesure la taille d'un pixel sur un écran à 96 dpi. Sur un écran dont le dpi est sensiblement différent de 96 ppp (comme les écrans Retina), l'agent utilisateur redimensionne l'unité px de sorte que sa taille corresponde à celle d'un pixel de référence. En d'autres termes, ce redimensionnement explique exactement pourquoi 1 pixel CSS équivaut à 2 pixels d'affichage physique Retina.

    Cela dit, jusqu'en 2010 (et nonobstant la situation du zoom mobile), le px correspondait presque toujours à un pixel physique, car tous les affichages largement disponibles tournaient autour de 96 dpi.

  • Les tailles spécifiées dans ems sont relatives par rapport à l'élément parent . Cela conduit au "problème de composition" de em où les éléments imbriqués deviennent progressivement plus grands ou plus petits. Par exemple:

    body { font-size:20px; } 
div { font-size:0.5em; }

    Nous donne:

    <body> - 20px
    <div> - 10px
        <div> - 5px
            <div> - 2.5px
                <div> - 1.25px

  • La CSS3 rem, qui est toujours relative uniquement à l'élément racine html, est désormais prise en charge sur 96% de tous les navigateurs utilisés .

L'opinion

Je pense que tout le monde est d'accord pour dire qu'il est bon de concevoir vos pages de manière à être accommodantes pour tous et à prendre en considération les malvoyants. Une de ces considérations (mais pas la seule!) Est de permettre aux utilisateurs d’agrandir le texte de votre site afin qu’il soit plus facile à lire.

Au début, le seul moyen de fournir aux utilisateurs un moyen de redimensionner la taille du texte consistait à utiliser des unités de taille relative (telles que ems). En effet, le menu de taille de police du navigateur a simplement changé la taille de la police racine. Ainsi, si vous spécifiez des tailles de police dans px, elles ne seront pas mises à l'échelle lors de la modification de l'option de taille de police du navigateur.

Les navigateurs modernes (et même le moins moderne IE7) ont tous changé la méthode de mise à l'échelle par défaut pour tout simplement effectuer un zoom avant sur tout, y compris les images et la taille des boîtes. Essentiellement, ils rendent le pixel de référence plus grand ou plus petit.

Oui, quelqu'un pourrait toujours changer la feuille de style par défaut de son navigateur afin d'ajuster la taille de la police par défaut (l'équivalent de l'option de taille de police ancienne), mais c'est une façon très ésotérique de s'y prendre et je ne parierais personne.1 le fait (Dans Chrome, il est enfoui dans les paramètres avancés, contenu Web, Tailles de police. Dans IE9, il est encore plus caché. Vous devez appuyer sur Alt, puis sur Afficher, Taille du texte.) Il est beaucoup plus facile de sélectionner l'option Zoom dans le menu principal du navigateur (ou utilisez Ctrl++/-/roulette de la souris).

1 - dans l'erreur statistique, naturellement

Si nous supposons que la plupart des utilisateurs redimensionnent les pages à l’aide de l’option zoom, je trouve les unités relatives généralement peu pertinentes. Il est beaucoup plus facile de développer votre page lorsque tout est spécifié dans la même unité (toutes les images sont traitées en pixels), et vous n'avez pas à vous soucier de la composition. ( "On m'a dit qu'il n'y aurait pas de maths" - il faut calculer ce que 1,5em correspond réellement à.)

Un autre problème potentiel lié à l'utilisation de seules unités relatives pour les tailles de police est que les polices redimensionnées par l'utilisateur risquent de briser les hypothèses de votre mise en page. Par exemple, cela peut entraîner un écrêtage ou une longueur excessive du texte. Si vous utilisez des unités absolues, vous n'avez pas à vous soucier des tailles de police inattendues dues à la rupture de votre mise en page.

Donc, ma réponse est d'utiliser des unités de pixels. J'utilise px pour tout. Bien entendu, votre situation peut varier et si vous devez prendre en charge IE6 (que les dieux des RFC aient pitié de vous), vous devrez quand même utiliser ems.

392
josh3736

Cet article décrit assez bien les avantages et les inconvénients de px, em et rem.

L’auteur conclut enfin que la meilleure méthode consiste probablement à utiliser à la fois px et rem, en déclarant px d’abord pour les navigateurs plus anciens et en redéclarant rem pour les nouveaux navigateurs:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
41
uzyn

En guise de réponse réflexe, je vous recommanderais d'utiliser rem, car cela vous permet de modifier le "niveau de zoom" de l'ensemble du document à la fois, si nécessaire. Dans certains cas, lorsque vous souhaitez que la taille soit relative à l'élément parent, utilisez em.

Mais le support de rem est irrégulier, IE8 a besoin d'un polyfill, et Webkit présente un bogue. De plus, le calcul des sous-pixels peut parfois faire disparaître des lignes telles que des lignes de pixel. Le remède consiste à coder en pixels des éléments aussi petits. Cela introduit encore plus de complexité.

Dans l’ensemble, demandez-vous si cela en vaut la peine - quelle est l’importance et la probabilité que vous modifiiez le "niveau de zoom" de l’ensemble du document dans CSS?

Dans certains cas, c'est oui, dans d'autres, ce sera non.

Cela dépend donc de vos besoins et vous devez peser le pour et le contre, car utiliser rem et em introduit des considérations supplémentaires par rapport au flux de travail "normal" basé sur les pixels.

Gardez à l'esprit qu'il est facile de passer (ou plutôt de convertir) votre CSS de px à rem (JavaScript est une autre histoire), car les deux blocs de code CSS suivants produiraient le même résultat:

html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}

html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
7
Rolf

la réponse de josh3736 est bonne, mais pour fournir un contrepoint 3 ans plus tard:

Je recommande d'utiliser rem unités pour les polices, ne serait-ce que parce que cela facilite la tâche de vous , le développeur, pour modifier la taille. Il est vrai que les utilisateurs ne modifient que très rarement la taille de la police par défaut dans leurs navigateurs, et que le zoom de navigateur moderne permet d’augmenter px unités. Mais que se passe-t-il si votre patron vient à vous et vous dit "n'agrandissez pas les images ou les icônes, mais agrandissez toutes les polices". Il est beaucoup plus facile de changer la taille de la police racine et de laisser toutes les autres polices s’échelonner par rapport à celle-ci, puis de changer la taille de px en dizaines ou en centaines de règles CSS.

Je pense qu'il est toujours judicieux d'utiliser des unités px pour certaines images ou pour certains éléments de mise en page qui doivent toujours avoir la même taille, quelle que soit l'échelle du dessin.

Caniuse.com a peut-être déclaré que seuls 75% des navigateurs avaient publié sa réponse en 2012, mais le 27 mars, ils ont déclaré un soutien de 93,78% . Seul IE8 ne le prend pas en charge parmi les navigateurs qu’ils suivent.

2
Joshua Carmody

J'ai trouvé le meilleur moyen de programmer les tailles de police d'un site Web: définir une taille de police de base pour le body, puis utiliser em (ou rem) pour chaque autre font-size que je déclare par la suite. C’est une préférence personnelle, je suppose, mais cela m’a bien servi et a également rendu très facile l’incorporation d’un plus conception sensible .

En ce qui concerne l'utilisation des unités rem, je pense qu'il est bon de trouver un équilibre entre une progressivité de votre code et un support pour les navigateurs plus anciens. Consultez ce lien sur le support du navigateur pour les unités rem , cela devrait vous aider beaucoup dans votre décision.

1
cereallarceny

pt est similaire à rem, en ce sens qu'il est relativement fixe, mais presque toujours indépendant du DPI, même lorsque des navigateurs non conformes traitent px de manière dépendante du périphérique. rem varie en fonction de la taille de la police de l'élément racine, mais vous pouvez utiliser quelque chose comme Sass/Compass pour le faire automatiquement avec pt.

Si vous aviez ceci:

html {
    font-size: 12pt;
}

alors 1rem serait toujours 12pt. rem et em sont aussi indépendants du périphérique que les éléments sur lesquels ils reposent. certains navigateurs ne se comportent pas selon les spécifications et traitent px littéralement. Même à l'ancienne époque du Web, 1 point était toujours considéré comme 1/72 pouce, c'est-à-dire qu'il y avait 72 points dans un pouce.

Si vous avez un ancien navigateur non conforme et que vous avez:

html {
    font-size: 16px;
}

alors 1rem va dépendre de l'appareil. Pour les éléments qui hériteraient de html par défaut, 1em dépendrait également du périphérique. 12pt serait l'équivalent garanti garanti: 16px / 96px * 72pt = 12pt, où 96px = 72pt = 1in.

Le calcul peut s'avérer assez compliqué si vous souhaitez vous en tenir à des unités spécifiques. Par exemple, .75em of html = .75rem = 9pt et .66em of .75em of html = .5rem = 6pt. Une bonne règle de base:

  • tilisez pt pour les tailles absolues. Si vous avez vraiment besoin que cela soit dynamique par rapport à l'élément racine, vous en demandez trop à CSS; vous avez besoin d’un langage qui compile en CSS, comme Sass/SCSS.
  • tilisez em pour les tailles relatives. C'est assez pratique de pouvoir dire: "Je veux que la marge de gauche corresponde à la largeur maximale d'une lettre" ou "Faites ceci Le texte de l'élément est juste un peu plus grand que son environnement. " <h1> est un bon élément pour utiliser une taille de police dans ems, car elle peut apparaître à différents endroits, mais doit toujours être plus grande que le texte à proximité. Ainsi, il n'est pas nécessaire d'avoir une taille de police distincte pour chaque classe appliquée à h1: la taille de la police s'adapte automatiquement.
  • tilisez px pour les très petites tailles. Pour les très petites tailles, pt peut devenir flou dans certains navigateurs à 96 DPI, puisque pt et px ne vous alignez pas tout à fait. Si vous souhaitez simplement créer une bordure fine d'un pixel, dites-le. Si vous avez un écran haute résolution, cela ne vous semblera pas évident lors des tests. Veillez donc à effectuer un test sur un écran générique à 96 DPI.
  • Ne vous occupez pas de sous-pixels pour rendre les choses plus sophistiquées sur les écrans haute résolution. Certains navigateurs peuvent la prendre en charge, en particulier sur les écrans haute résolution, mais c’est un non-non. La plupart des utilisateurs préfèrent gros et clairs, même si le Web nous a appris le contraire aux développeurs. Si vous souhaitez ajouter des détails étendus à vos utilisateurs avec des écrans à la pointe de la technologie, vous pouvez utiliser des graphiques vectoriels (lire: SVG), ce que vous devriez faire de toute façon.
0
Zenexer