Dois-je utiliser des unités de valeur px ou rem dans mon CSS? [fermé]

375

Je conçois un nouveau site Web et je veux qu'il soit compatible avec autant de navigateurs et de paramètres de navigateur que possible. J'essaie de décider quelle unité de mesure je dois utiliser pour les tailles de mes polices et éléments, mais je ne trouve pas de réponse concluante.

Ma question est: dois-je utiliser pxou remdans mon CSS?

  • Jusqu'à présent, je sais que l'utilisation pxn'est pas compatible avec les utilisateurs qui ajustent leur taille de police de base dans leur navigateur.
  • J'ai ignoré les ems car ils sont plus compliqués à entretenir que les rems car ils tombent en cascade.
  • Certains disent que remles résolutions sont indépendantes de la résolution et donc plus souhaitables. Mais d'autres disent que la plupart des navigateurs modernes zooment tous les éléments de la même manière, donc l'utilisation pxn'est pas un problème.

Je pose cette question car il existe de nombreuses opinions différentes sur la mesure de distance la plus souhaitable en CSS, et je ne sais pas laquelle est la meilleure.

html css distance units-of-measurement TylerH
la source
4
C'est une question de litige, d'argumentation et d'opinion, pas le genre de questions techniques sur lesquelles SO est bon. Soit dit en passant, la bonne réponse est «Non». ☺
Jukka K. Korpela
2
Même le commentaire est dépassé. Ce n'est pas parce que le PO demande la bonne opinion que nous allons seulement donner notre propre opinion. Près de 8 ans plus tard, cette question montre qu'il y a toujours un intérêt à l'évolution du sujet. Les réponses actuelles sont suffisamment étayées et techniques et ne sont PAS exprimées. C'est pourquoi je suggère de modifier le mot "opinion" en "expérience" afin de ne pas tomber dans ce piège de la réouverture et de la fermeture de la question encore et encore.
Tim Vermaelen
2
@TimVermaelen cette question n'a été fermée qu'une seule fois au cours de sa vie. Le changement effectué n'était pas substantiel, car la réponse dépend toujours entièrement du contexte qui ne peut être fourni que si OP modifie la question pour poser des questions sur un scénario spécifique. Il n'y a pas de «meilleure» option pour tous les cas, donc cette question est basée sur l'opinion.
TylerH

Réponses:

418

TL; DR: utiliser px.

Les faits

  • Tout d'abord, il est extrêmement important de savoir que, par spécification , l' pxunité CSS ne correspond pas à un pixel d'affichage physique. Cela a toujours été vrai - même dans la spécification CSS 1 de 1996 .

    CSS définit le pixel de référence , qui mesure la taille d'un pixel sur un affichage à 96 dpi. Sur un écran dont le dpi est sensiblement différent de 96 dpi (comme les écrans Retina), l'agent utilisateur redimensionne l' pxunité afin que sa taille corresponde à celle d'un pixel de référence. En d'autres termes, cette mise à l'échelle est exactement la raison pour laquelle 1 pixel CSS équivaut à 2 pixels d'affichage Retina physiques.

    Cela dit, jusqu'en 2010 (et malgré la situation du zoom mobile), le pxpresque égal à un pixel physique, car tous les écrans largement disponibles étaient autour de 96 dpi.

  • Les tailles spécifiées dans ems sont relatives à l'élément parent . Cela conduit au em«problème de composition» du «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

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

L'opinion

Je pense que tout le monde convient qu'il est bon de concevoir vos pages pour qu'elles soient adaptées à tout le monde et de prendre en considération les malvoyants. Une telle considération (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, la seule façon de fournir aux utilisateurs un moyen de mettre à l'échelle la taille du texte était d'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 avez spécifié des tailles de police dans px, elles ne seraient pas mises à l'échelle lors du changement de l'option de taille de police du navigateur.

Les navigateurs modernes (et même l'IE7 pas si moderne) ont tous changé la méthode de mise à l'échelle par défaut pour simplement zoomer sur tout, y compris les images et les tailles de boîte. Essentiellement, ils agrandissent ou réduisent le pixel de référence.

Oui, quelqu'un pourrait toujours changer la feuille de style par défaut de son navigateur pour modifier la taille de police par défaut (l'équivalent de l'option de taille de police à l'ancienne), mais c'est une façon très ésotérique de procéder et je parierais que personne 1 ne le fait. (Dans Chrome, il est enterré sous les paramètres avancés, le contenu Web, les tailles de police. Dans IE9, il est encore plus caché. Vous devez appuyer sur Alt et aller à Affichage, Taille du texte.) Il est beaucoup plus facile de simplement sélectionner l'option Zoom dans le menu principal du navigateur (ou utilisez la molette Ctrl+ +/ -/ 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 de zoom, je trouve que les unités relatives ne sont généralement pas pertinentes. Il est beaucoup plus facile de développer votre page lorsque tout est spécifié dans la même unité (les images sont toutes 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 s'agit de devoir calculer à quoi 1.5em fonctionne réellement.)

Un autre problème potentiel lié à l'utilisation uniquement d'unités relatives pour les tailles de police est que les polices redimensionnées par l'utilisateur peuvent briser les hypothèses de votre mise en page. Par exemple, cela peut entraîner un écrêtage ou une exécution trop longue du texte. Si vous utilisez des unités absolues, vous n'avez pas à vous soucier des tailles de police inattendues qui briseraient votre mise en page.

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

josh3736
la source
43
Vous devez utiliser des pixels et rem. Les nouveaux navigateurs sont donc rem et les anciens navigateurs retombent en pixels (comme WordPress 2012). Cela peut être automatisé avec Sass ou moins, donc tout ce que vous faites est d'entrer la valeur px et il génère automatiquement px et rem.
cchiera
63
Mon gros problème avec cet argument est que lorsque vous ajustez la taille de la police et l'espacement aux points d'arrêt réactifs, vous pouvez définir une nouvelle taille de police sur l'élément html et chaque mesure que vous avez définie dans rem s'ajustera automatiquement, tandis qu'avec px, vous devrez écrire de nouvelles règles pour chaque mesure que vous souhaitez modifier. Bien sûr, d'autres ajustements seront probablement nécessaires même lors de l'utilisation de rem, mais avec une planification intelligente, vous obtenez gratuitement une énorme quantité de mise à l'échelle proportionnelle. Lier certaines mesures d'espacement des boîtes au type, un code plus léger et moins de complexité / plus de maintenabilité équivaut à une victoire nette pour moi.
RobW
16
En supposant qu'aucun utilisateur ne modifie le paramètre de taille de police est assez gras. Cette réclamation doit être accompagnée de données. Sinon, c'est juste un moyen d'aliéner certains des utilisateurs qui sont déjà fragiles (ppl lourdement malvoyants). Si vous le pouvez, utilisez rem au lieu de px. OMI, les applications devraient être capables de mettre à l'échelle indépendamment leur interface et la taille de la police. "Il suffit d'utiliser px" est ce que de nombreux développeurs aux prises avec le problème ems veulent entendre, mais ce n'est pas la bonne réponse pour le Web.
Olivvv
18
Ce serait formidable d'avoir un suivi à ce sujet. Rem est désormais à 95% + support.
Statistiques d'apprentissage par l'exemple
10
Mauvais, je me fiche de IE (personne ne devrait).
Vahid Amiri
194

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>
Développer l'extrait

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>
Développer l'extrait

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>
Développer l'extrait

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>
Développer l'extrait

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.

zzzzBov
la source
Je sais que c'est tard, mais j'aime la façon d'utiliser REM, mais j'ai le plus de difficulté à utiliser rem lorsque j'utilise matrix()avec javascript, ce que les valeurs de traduction de matrice utilisent px(corrigez-moi si je me trompe), et je suis tellement confus avec lui .
Ampersanda
3
@Ampersanda, en JavaScript, vous allez largement utiliser des valeurs de pixels calculées. Ma recommandation est de basculer les classes si possible afin que CSS puisse gérer l'apparence des choses. Pour certaines choses, vous ne pourrez pas éviter d'utiliser JS pour calculer les valeurs en pixels, donc votre meilleur pari est de calculer la valeur en pixels à partir de l'état DOM.
zzzzBov
Je vois, donc je dois, getComputedStyle()mais le résultat est toujours sur pixel, donc je dois diviser le résultat par la remvaleur (comme 16). CMIIW
Ampersanda
@Ampersanda uniquement si vous générez réellement une remvaleur, si vous avez déjà la bonne pxvaleur, il n'est pas nécessaire de passer aux remunités pour les choses qui sont déjà calculées pour le contexte donné.
zzzzBov
1
ont 1rem égal à 1px Cela provoque des problèmes en raison de la taille de police minimale de Chrome: stackoverflow.com/questions/44378664/… stackoverflow.com/questions/24200797/…
Paul
44

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

L'auteur conclut enfin que la meilleure méthode est probablement d'utiliser les deux pxet rem, en déclarant d' pxabord pour les navigateurs plus anciens et en redéclarant rempour les navigateurs plus récents:

html { font-size: 62.5%; } 
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
Uzyn
la source
1
Ouais, c'est ce qui m'a intéressé au rem en premier lieu. Deux choses que je ne comprends pas: il ne le conseille qu'en tant qu'unité de mesure pour les polices (pas les éléments), et si je le comprends correctement, la seule vraie raison d'utiliser (r) em est pour que les utilisateurs d'IE puissent redimensionner le texte?
1
@Samuel je le crois. Sinon pour le redimensionnement du texte, je pense que nous préférerions utiliser px. En ce qui concerne l'unité des éléments, il pxserait préférable de s'en tenir à , car vous voudriez généralement dimensionner les éléments avec précision.
uzyn
Mais si vous faites cela, tout paramètre de navigateur qui redéfinit la taille de police de base ferait bousiller votre mise en page, non? Pourquoi ne pas rem pour tout?
1
Comme de nombreux commentaires le notent ici , la raison pour laquelle nous avons dû abandonner pxest d'activer le redimensionnement. Maintenant, si nous utilisons rem, nous devons toujours fournir un pxrepli (dans les anciens navigateurs). Essentiellement, cela signifie pxmieux redimensionner le support rem. Les nouveaux navigateurs prennent en charge le pxredimensionnement et pour les navigateurs plus anciens, quelle que soit la manière dont nous allons recourir px. Maintenant, à la lumière de cette conclusion, je suis très intéressé de savoir pourquoi utiliser rem? Si je peux voir la lumière au bout du tunnel.
fusionstrings
3
Il n'y a aucune garantie que des valeurs comme 62,5% = 10px. Cela n'est vrai que lorsque la taille de police par défaut du navigateur a été définie sur 16 pixels. Bien que ce soit la valeur par défaut, ce n'est pas garanti.
cimmanon
7

En guise de réponse réflexe, je recommanderais d'utiliser rem, car il vous permet de modifier le "niveau de zoom" de tout le 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 rem est inégal, IE8 a besoin d'un polyfill et Webkit présente un bogue. De plus, le calcul de sous-pixels peut parfois faire disparaître des éléments tels que des lignes d'un pixel. Le remède consiste à coder en pixels pour de si petits éléments. Cela introduit encore plus de complexité.

Donc, dans l'ensemble, demandez-vous si cela en vaut la peine - dans quelle mesure est-il important et probable que vous modifiez le "niveau de zoom" de l'ensemble du document dans CSS?

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

Ainsi, cela dépend de vos besoins, et vous devez peser le pour et le contre, car l'utilisation de rem et em introduit quelques considérations supplémentaires par rapport au flux de travail basé sur des pixels "normaux".

Gardez à l'esprit qu'il est facile de changer (ou plutôt de convertir) votre CSS de px en 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;
}
Rolf
la source
6

Oui, REM et PX sont relatifs, mais d'autres réponses ont suggéré d'opter pour REM plutôt que PX, je voudrais également sauvegarder cela en utilisant un exemple d'accessibilité.
Lorsque l'utilisateur définit une taille de police différente sur le navigateur, REM redimensionne automatiquement les éléments tels que les polices, les images, etc. sur la page Web, ce qui n'est pas le cas avec PX.

Dans le gif ci-dessous, le texte du côté gauche est défini à l'aide de l'unité de taille de police REM tandis que la police du côté droit est définie par l'unité PX.

entrez la description de l'image ici

Comme vous pouvez le voir, REM augmente / diminue automatiquement lorsque je redimensionne la taille de police par défaut de la page Web (en bas à droite)

La taille de police par défaut d'une page Web est de html{font-size:100%}16 pixels, ce qui est égal à 1 rem (uniquement pour la page HTML par défaut, par exemple ), donc 1,25rem est égal à 20 pixels.

PS: qui d'autre utilise REM? Cadres CSS! comme Bootstrap 4, Bulma CSS, etc., donc mieux vous entendre.

JerryGoyal
la source
3

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

Je recommande d'utiliser des remunités pour les polices, ne serait-ce que parce que cela facilite la modification des tailles pour vous , le développeur. Il est vrai que les utilisateurs modifient très rarement la taille de police par défaut dans leur navigateur, et que le zoom du navigateur moderne augmentera les pxunité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 simplement changer la taille de la police racine et de laisser toutes les autres polices se mettre à l'échelle par rapport à cela, puis de changerpx tailles en dizaines ou en centaines de règles CSS.

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

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

Joshua Carmody
la source
1
Only IE8 doesn't support it among the browsers they track.Hein? La page liée indique que «IE9 et IE10 ne prennent pas en charge les unités rem lorsqu'ils sont utilisés dans la propriété de raccourci de police ou lorsqu'ils sont utilisés sur des pseudo-éléments. IE9, 10 et 11 ne prennent pas en charge les unités rem lorsqu'elles sont utilisées dans la propriété line-height lorsqu'elles sont utilisées sur: avant et: après les pseudo-éléments. Les bordures dimensionnées in rem disparaissent lorsque la page est dézoomée dans Chrome. Ne fonctionne pas sur le navigateur Samsung Note II Android 4.3 et Samsung Galaxy Tab 2 sur Android 4.2. Chrome 31-34 et Android basé sur Chrome (comme 4.4) ont un bug de taille de police qui se produit lorsque l'élément racine a une taille basée sur un pourcentage. "
e-sushi
En outre, en ce qui concerne votre as of March 27 they claim 93.78% support.Au moment de la rédaction de ce commentaire, caniuse ne montre que 91,79% de prise en charge complète du navigateur. En regardant votre pourcentage, je suis sûr que vous avez également inclus le support du navigateur buggy (actuellement à 2,8%, ce qui pourrait être interprété comme une couverture globale optimiste de 94,6% - mais le fait est que ces 2,8% sont livrés avec un buggy, incomplet ou même complètement échec du support… comme indiqué dans mon commentaire précédent: chaque bug est le résultat de différentes versions de navigateur et combinaisons de systèmes d'exploitation.) Vous voudrez peut-être corriger votre réponse en conséquence…
e-sushi
1

J'ai trouvé que la meilleure façon de programmer les tailles de police d'un site Web est de définir une taille de police de base pour le bodypuis d'utiliser les em (ou rem) pour tous les autres que font-sizeje déclare après cela. C'est une préférence personnelle, je suppose, mais cela m'a bien servi et a également rendu très facile l'intégration d'un design plus réactif .

En ce qui concerne l'utilisation des unités rem, je pense qu'il est bon de trouver un équilibre entre être progressif dans votre code, mais également de prendre en charge les navigateurs plus anciens. Consultez ce lien sur la prise en charge du navigateur pour les unités rem , qui devrait vous aider à prendre une bonne décision.

cereallarceny
la source
D'accord. Mais la conception réactive est tout aussi facile à faire avec des unités px à droite (il suffit d'écrire vos requêtes multimédias basées sur px au lieu de em)?
Cependant, si vous souhaitez réduire la taille de votre police à mesure que la largeur de la fenêtre d'affichage de votre site Web diminue, vous pouvez modifier la bodytaille de la police et tout change avec.
cereallarceny
Je ne suis pas vraiment inquiet du support du navigateur. Je vais simplement inclure une taille px de secours pour toutes les tailles, afin que les navigateurs plus anciens aient quelque chose à interpréter.
Ensuite, optez pour la voie progressive en utilisant rem's. Tant que vous fournissez un repli, je ne vois aucun mal. Pour moi, cela semble être un travail supplémentaire, mais peut-être pas dans votre situation.
cereallarceny
0

ptest similaire à rem, car il est relativement fixe, mais presque toujours indépendant du DPI, même lorsque les navigateurs non conformes traitent pxen fonction de l'appareil. remvarie 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 1remserait toujours 12pt. remet emsont aussi indépendants de l'appareil que les éléments sur lesquels ils s'appuient; certains navigateurs ne se comportent pas conformément aux spécifications et traitent pxlittéralement. Même dans l'ancien temps du Web, 1 point était toujours considéré comme 1/72 pouce - c'est-à-dire qu'il y a 72 points dans un pouce.

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

html {
    font-size: 16px;
}

puis 1remva dépendre de l' appareil. Pour les éléments qui hériteraient htmlpar défaut, 1emseraient également dépendants du périphérique. 12ptserait l' équivalent , espérons -le, indépendant de l'appareil:, 16px / 96px * 72pt = 12ptoù 96px = 72pt = 1in.

Il peut être assez compliqué de faire le calcul 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 d'or:

  • Utilisez ptpour les tailles absolues. Si vous avez vraiment besoin que cela soit dynamique par rapport à l'élément racine, vous demandez trop de CSS; vous avez besoin d'un langage qui compile en CSS, comme Sass / SCSS.
  • Utilisez empour les tailles relatives. Il est assez pratique de pouvoir dire: «Je veux que la marge de gauche soit à peu près la largeur maximale d'une lettre» ou «Rendez le texte de cet élément un peu plus grand que son environnement». <h1>est un bon élément sur lequel utiliser une taille de police en ems, car elle peut apparaître à divers endroits, mais doit toujours être plus grande que le texte à proximité. De cette façon, vous n'avez pas besoin d'avoir une taille de police distincte pour chaque classe à laquelle s'applique h1: la taille de police s'adaptera automatiquement.
  • Utiliser pxpour des tailles très minuscules. À de très petites tailles, ptpeut devenir floue dans certains navigateurs à 96 DPI, ptet pxne s'aligne 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 sera pas évident pour vous pendant le test, alors assurez-vous de tester sur un écran générique à 96 DPI à un moment donné.
  • Ne traitez pas en sous-pixels pour rendre les choses fantaisistes sur les écrans haute résolution. Certains navigateurs peuvent le prendre en charge - en particulier sur les écrans à haute résolution - mais c'est un non-non. La plupart des utilisateurs préfèrent le gros et le clair, bien que le Web nous ait appris le contraire. Si vous souhaitez ajouter des détails supplémentaires pour vos utilisateurs avec des écrans de pointe, vous pouvez utiliser des graphiques vectoriels (lire: SVG), ce que vous devriez faire de toute façon.
Zenexer
la source
1
pt est pour les médias imprimés et ne devrait jamais être utilisé pour les écrans
sf
@sf CSS définit pt et px de telle sorte qu'ils soient toujours le même rapport, bien que ce ne soit pas une utilisation techniquement précise de ces termes (72pt = 96px = 1in). En fait, en CSS, px n'est pas vraiment un pixel d'appareil unique. Sur mon écran, 1px correspond à 2 pixels de l'appareil. L'avantage d'utiliser pt sur px est que vous pouvez facilement spécifier des tailles d'élément par rapport aux tailles liées au texte.
Zenexer
-2

Réponse à moitié (mais seulement à moitié) sarcastique (l'autre moitié est un dédain amer de la réalité de la bureaucratie):

Utilisez vh

Tout est toujours dimensionné pour la fenêtre du navigateur.

Autorisez toujours le défilement vers le bas, jamais sur le côté.

Définissez la largeur du corps comme un 50vh statique, et rien ne flotte ni ne se détache de la div parent. Et stylisez uniquement à l'aide de tables pour que tout soit maintenu de manière rigide comme prévu. Inclure une fonction javascript pour annuler toute activité ctrl +/- que l'utilisateur peut faire.

Tout le monde vous déteste, sauf les gens qui vous disent de faire correspondre les choses à leur maquette, et ils seront extatiques. Et tout le monde sait que leur opinion est la seule qui compte.

liljoshu
la source
-3

Oui. Ou plutôt non.

Euh, je veux dire, ça n'a pas d'importance. Utilisez celui qui a du sens pour votre projet particulier. PX et EM ou les deux sont également valides mais se comporteront un peu différemment selon l'architecture CSS de votre page globale.

MISE À JOUR:

Pour clarifier, je déclare qu'en général, peu importe ce que vous utilisez. Parfois, vous voudrez peut-être spécifiquement choisir l'un plutôt que l'autre. Les EM sont agréables si vous pouvez recommencer à zéro et que vous souhaitez utiliser une taille de police de base et tout faire par rapport à cela.

Les PX sont souvent nécessaires lorsque vous modifiez une refonte sur une base de code existante et que vous avez besoin de la spécificité de px pour éviter de mauvais problèmes d'imbrication.

DA.
la source
Donc, votre réponse est que cela n'a pas d'importance? Ou y a-t-il certaines situations dans lesquelles vous apprécieriez l'une par rapport à l'autre? Et si oui, dans quelles situations serait-ce le cas?
@Samuel oui, il peut arriver que vous souhaitiez utiliser l'un ou l'autre. J'ai mis à jour ma réponse avec plus d'informations.
DA.
Désolé, je me suis un peu confondu avec le libellé d'origine. Je pense que vous aviez REM dans le titre et EM dans le corps. Il semble que vous posiez spécifiquement des questions sur REM. La réponse est toujours à peu près la même, mais REM a quelques avantages supplémentaires à considérer, mais est principalement utilisé de la même manière que EM - il vous permet d'utiliser une taille de police `` de base ''.
DA.
Pourquoi est-ce que " em [...] est sympa si vous pouvez partir de zéro et que vous souhaitez utiliser une taille de police de base et tout faire par rapport à cela. "? Quel est l'avantage de (r) em sur px? Est-ce pour que les utilisateurs d'IE puissent redimensionner le texte, ou y a-t-il d'autres avantages par rapport à px (qui semble être plus simple)?
EM et REM ont le même avantage: vous pouvez définir le HTML ou BODY sur une taille de police spécifique (par exemple 10px), puis tout le reste est défini comme EM ou REM. De cette façon, si vous voulez agrandir tous les types proportionnellement, il vous suffit de changer ce style initial de 10 pixels en 11 pixels. Cela était beaucoup plus utile il y a 5 ans lorsque nous étions tous en train de créer nos propres widgets de redimensionnement de polices basés sur JS. Ces jours-ci, les navigateurs font un meilleur travail de zoom (en particulier mobile) que je trouve cela beaucoup moins avantageux. Si vous trouvez PX plus simple, alors c'est un avantage pour vous et certainement une raison valable pour aller avec PX.
DA.
-4

les em sont la voie à suivre, pas seulement pour les polices mais vous pouvez également les utiliser avec des boîtes, l'épaisseur des lignes et d'autres trucs, pourquoi?

En termes simples, les em sont les seuls à évoluer à l'unisson avec les touches alt + et alt- du navigateur pour le zoom.

D'autres mesures sont à l'échelle, mais pas aussi clairement qu'un em.

Sur une note latérale si vous voulez le meilleur de la mise à l'échelle, convertissez également vos graphiques en SVG vectoriel si possible, car ceux-ci seront également proprement mis à l'échelle avec le taux de zoom du navigateur.

shawty
la source
3
Mais la plupart des navigateurs de nos jours zooment tous les éléments de la page de manière égale (sauf si vous ajustez la taille de la police de base), de sorte que l'avantage d'utiliser (r) em n'est pas vrai pour les navigateurs modernes, n'est-ce pas?
C'est et ce n'est pas le cas, bien que vous ayez raison dans ce que vous dites, il s'agit davantage du facteur d'échelle que du delta d'échelle. Le delta sera toujours uniforme quelle que soit la mesure utilisée, mais le facteur d'échelle (à condition que les calculs soient effectués correctement) s'ajustera selon les besoins, par exemple un moniteur à écran large par rapport à un moniteur standard, ou des pixels rectangulaires par rapport aux pixels carrés. Parce que les rems sont en fait basés sur la vraie mesure d'une imprimante, la mise à l'échelle sera toujours plus adaptée, d'autres (tels que%) sont souvent au mieux un décalage delta
shawty
(suite) avec une multiplication appliquée dans les deux directions et, par conséquent, peut dans certains cas donner un rapport de visualisation très disproportionné.
shawty
2
"En termes simples, les em sont les seuls à évoluer à l'unisson avec les touches alt + et alt- du navigateur pour le zoom." = c'est incorrect.
DA.
D'accord, j'aurais pu mieux le formuler, voir mon commentaire précédent pour la correction.
shawty
-5

Les EM sont la SEULE chose qui évolue pour les requêtes multimédias qui gèrent la mise à l'échelle +/-, ce que les gens font tout le temps, pas seulement les aveugles. Voici une autre démonstration professionnelle très bien écrite de la raison pour laquelle cela est important.

Au fait, c'est pourquoi Zurb Foundation utilise ems , tandis que le Bootstrap 3 inférieur utilise toujours des pixels.

robmuh
la source
2
Ce n'est pas vraiment correct. Autrefois, les pixels ne pouvaient pas être agrandis dans les anciennes versions d'IE. +/- fait maintenant un zoom pleine page dans tous les navigateurs actuels, donc ce n'est pas un problème. De plus, cette question concerne les rems plutôt que px - pas em vs px.
Rich Bradshaw
1
Vous me faites rire. Avez-vous même essayé de faire évoluer votre site en utilisant +/- en utilisant des pixels? L'écriture sur les pixels à zoomer est complètement fausse. Votez contre moi tout ce que vous voulez. Les votes ne changent pas la réalité.
robmuh
1
Peut-être que nous prenons des choses légèrement différentes - avez-vous une chance de mettre en place une démonstration simple pour démontrer la différence?
Rich Bradshaw
Je ne pense pas que la question soit de savoir quelles unités utiliser dans les requêtes médias…
binki