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

Je suis en train de concevoir un nouveau site web et je veux qu'il soit compatible avec autant de navigateurs et les paramètres du navigateur que possible. Je suis en train de décider ce que l'unité de mesure à utiliser pour les tailles de mes polices de caractères et les éléments, mais je suis incapable de trouver une réponse concluante.

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

  • Jusqu'à présent, je sais que l'utilisation d' px n'est pas compatible avec les utilisateurs de régler leur base taille de la police dans leur navigateur.
  • J'ai ignoré ems parce qu'ils sont plus de tracas, de maintenir, par rapport à rems, comme ils en cascade.
  • Certains disent que rems sont indépendants de la résolution et donc plus souhaitable. Mais d'autres disent que la plupart des navigateurs modernes zoom tous les éléments de manière égale de toute façon, à l'aide de px n'est pas un problème.

Je vous pose cette question parce qu'il y a beaucoup d'opinions différentes sur ce qui est le plus souhaitable mesure de distance dans le CSS, et je ne suis pas sûr de qui est le meilleur.

  • C'est une bonne ressource, les commentaires ont même plus: kyleschaeffer.com/best-practices/...
  • J'ai lu ça, mais le rem n'est pas mentionné dans cet article. Aussi, il n'a pas d'expliquer son point de vue en profondeur: "Un problème avec l'unité de pixel, c'est qu'il n'a pas l'échelle vers le haut pour les déficients visuels lecteurs ou à la baisse pour s'adapter à des appareils mobiles." Certains sont en désaccord avec cet énoncé et dire que les appareils mobiles face parfaitement avec px.
  • Certains pourraient dire que la plupart des appareils face parfaitement, surtout les appareils récents.
  • C'est une grande question en passant, +1.
  • merci, c'est quelque chose qui m'énerve depuis un moment et je n'ai pas été en mesure de le comprendre, de mon propre chef.
  • Cette matière à controverse et de l'argumentation et de l'opinion, pas le genre de questions techniques qui DONC est bon. Par ailleurs, la bonne réponse est “Non”. ☺

InformationsquelleAutor | 2012-08-03
  1. 388

    TL;DR: utilisation px.

    Les Faits

    • Tout d'abord, il est extrêmement important de savoir que par spec, le CSS px unité ne pas égal à un physique de pixel d'affichage. Cela a toujours été vrai – même en 1996 CSS 1 spec.

      CSS définit la référence pixel, qui mesure la taille d'un pixel sur un 96 ppp affichage. Sur un écran qui a une résolution très différentes de celles de 96 ppp (comme les écrans de la Rétine), l'agent de l'utilisateur redimensionne la px de l'unité, de sorte que sa taille correspond à celle d'un pixel de référence. En d'autres termes, ce changement d'échelle est exactement pourquoi 1 CSS pixel est égal à 2 physique de l'écran Retina de pixels.

      Cela dit, jusqu'en 2010 (et le mobile zoom situation nonobstant), le px presque toujours fait de l'égalité un physique de pixel, parce que partout, les expositions étaient autour de 96 ppp.

    • Tailles spécifiées dans ems sont relatifs à l'élément parent. Cela conduit à la em's "aggrave le problème", où les éléments imbriqués devenir de plus en plus grande ou plus petite. 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 relative seulement à la racine html élément, est désormais pris en charge sur 96% de tous les navigateurs à utiliser.

    L'Avis

    Je pense que tout le monde est d'accord que c'est bon pour la conception de vos pages pour être accueillant pour tout le monde, et de rendre compte pour les déficients visuels. Un tel examen (mais pas le seul!) est permettant aux utilisateurs de rendre le texte de votre site plus grand, de sorte qu'il est plus facile à lire.

    Au début, la seule façon de fournir aux utilisateurs un moyen d'adapter la taille du texte en utilisant la taille relative des unités (comme ems). C'est parce que le navigateur de la taille de la police du menu simplement changé la racine de la taille de la police. Ainsi, si vous avez spécifié la taille de la police px, ils ne seraient pas à l'échelle lors de la modification du navigateur de police de l'option de taille.

    Les navigateurs modernes (et même pas si moderne IE7) tous changé la valeur par défaut de mise à l'échelle de la méthode de simplement en zoomant sur tout, y compris les images et la boîte de tailles. Essentiellement, ils font la référence des pixels plus grands ou plus petits.

    Oui, quelqu'un pourrait encore changer leur navigateur par défaut de la feuille de style à modifier la taille de police par défaut (l'équivalent de l'ancien style de taille de police option), mais c'est une très ésotérique façon d'aller à ce sujet et j'avais parier que personne ne1 t-il. (Dans Chrome, il est enterré sous les paramètres avancés, le contenu Web, les Tailles de Police. Dans IE9, c'est encore plus caché. Vous devez appuyer sur la touche Alt, et allez dans Affichage, Taille du Texte.) Il est beaucoup plus facile de sélectionner l'option de Zoom dans le navigateur du menu principal (ou utilisez Ctrl++/-/molette de la souris).

    1 - dans les statistiques d'erreur, naturellement

    Si nous supposons que la plupart des utilisateurs à l'échelle les pages à l'aide de l'option de zoom, je trouve des unités relatives pour la plupart hors de propos. Il est beaucoup plus facile de développer votre page quand 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 l'intérêt composé. ("On m'a dit il n'y aurait pas de mathématiques" – il s'agit d'avoir à calculer ce que 1.5 em fonctionne vraiment pour.)

    Un autre problème potentiel de l'utilisation des unités relatives pour les tailles de police, c'est que l'utilisateur redimensionnement des polices peut casser des hypothèses de votre mise en page permet de. Par exemple, cela peut aboutir à un texte d'obtenir coupées ou en cours d'exécution trop long. Si vous utilisez des unités absolues, vous n'avez pas à vous soucier des imprévus tailles de police de 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 sûr, votre situation peut varier, et si vous devez supporter IE6 (que les dieux de la Rfc ont pitié de vous), vous devrez utiliser ems de toute façon.

    • C'est une formidable réponse. Merci pour le détail!
    • une grande réponse, merci
    • Vous devez utiliser des pixels et de la rem. Si les navigateurs les plus récents obtenir rem et les anciens navigateurs revenir à des pixels (comme WordPress, 2012). Cela peut être automatted avec Sass ou Moins tout ce que vous faire est d'entrer le px de la valeur et automatiquement les sorties px et rem.
    • Mon gros bémol à cet argument est que lors du réglage de la taille de la police et de l'espacement au réactif de points d'arrêt vous pouvez définir une nouvelle taille de la police sur l'élément html et chaque mesure que vous avez mis dans rem ajustera automatiquement, tandis qu'avec le px vous aurez besoin d'écrire de nouvelles règles pour chaque mesure que vous souhaitez modifier. Bien sûr, des ajustements seront sans doute nécessaires, même lors de l'utilisation de rem, mais avec une planification intelligente vous obtenez une quantité énorme de la mise à l'échelle proportionnelle pour gratuit. Lier certaines zone de l'espacement des mesures de type, code plus léger, et moins de complexité/ plus de maintenabilité équivaut à une victoire écrasante du rem pour moi.
    • Je ne comprends pas dans ce cas, vous devez faire ce div { font-size:0.5em; } il ressemble très mauvais... une taille de police doit être donné seulement au texte de la balise... et vous avez à gérer pour exemple: li { font-size:1.2em } li li { font-size:1.em } dans la balise DIV-vous donner pour cent de la valeur de font-size EXACTEMENT à l'échelle des textes de DIV.... et avec des classes, et pas avec les "div"
    • Éloquent, sexy, et précise en même temps. Belle réponse.
    • En supposant qu'aucun utilisateur change la taille de police paramètre est très gras. Une telle demande doit être appuyée par des données. Sinon il juste un moyen de s'aliéner certains utilisateurs qui sont déjà fragiles (fortement déficients visuels ppl). Si vous le pouvez, utilisez rem au lieu de px. OMI, les applications doivent être en mesure d'évoluer indépendamment de leur interface et la taille de police. "Il suffit d'utiliser px" est ce que beaucoup de devs en difficulté avec l'ems question voulez entendre, mais ce n'est pas la bonne réponse pour le web.
    • j'aime cette réponse. les pixels sont tout aussi arbitraire que n'importe quelle autre unité, mais ils ont l'avantage d'être la même unité utilisée dans les images et autres supports informatiques. dans l'avenir, je pense pixels représentera un système fiable de mesure relative pour les médias numériques et pas n'importe lequel fait actuellement leur point de vue sémantique à confusion.
    • Vous pensez que c'est toujours le cas?
    • Aussi loin que rems, cela dépend vraiment de si oui ou non vous avez encore besoin de soutien IE 8. Je préfère encore px si.
    • Ce serait génial d'avoir un suivi sur ce point. Rem est maintenant à 95%+ support.
    • Je pense que cette réponse est correcte pour des sites responsive où la présentation est faite en %
    • Lors de l'utilisation de pixels, sur les appareils mobiles que certaines choses sont ridiculement petites. J'ai fini à l'aide de centimètres. Bien sûr, il n'est pas précis centimètres, mais il n'a provoquer les boutons à être d'environ la même taille sur l'ordinateur et le téléphone mobile.
    • Bootstrap 4 utilise rem. Nous allons donc être obligés de l'utiliser. Il y a le choix, mais depuis le bootstrap est mainstream nous allons être "forcé" à utiliser rem.
    • À partir de caniuse.com/#search=rem : IE 9 & IE 10 do not support -**rem** units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements. ...Il s'agit pour Windows - avez-vous des utilisateurs avec Windows 7 ? Oui? Eh bien, vous devriez soutenir IE9, parce que beaucoup n'mise à jour IE9, mais aussi de nombreux utilisateurs n'ont pas à jour pour le 10/11. IE8 ne prend pas en charge rem mais il n'est guère vu de nos jours - moins de 1% de l'utilisation, d'un support de rem est d'environ 95% (2016-04-16 | AAAA-MM-JJ)
    • Faux, je n'ai pas de soins sur IE (personne ne devrait).
    • L'une des raisons pour laquelle je suis encore en utilisant Bootstrap 3.
    • Bootstrap 4 utilise rem ... vrai, mais aujourd'hui, je vois une différence significative dans la taille de la police de traitement avec Firefox étant significativement plus grande (au point de presque la rupture de la conception du site). Afin de tester, vérifier et confirmer avant de sauter à rem pour les polices de caractères. Bootstrap 3 avec pixel en fonction des polices avait pas de problème (je suis peut-être juste le coup du navigateur/résolution de l'écran type de questions, mais je vois des problèmes similaires en REM sites d'aujourd'hui).
    • intéressant. J'utilise principalement Firefox (Dev Edition et de Nuit), commutation de Safari/Chrome/Edge/Opéra pour tester et n'a jamais eu ce problème, ni avec le bureau ni dans la version mobile. Est-il possible qu'il est de votre navigateur?

    InformationsquelleAutor josh3736
  2. 140

    je voudrais faire l'éloge josh3736 réponse servant à fournir un excellent contexte historique. Alors qu'il est bien articulé, le CSS, le paysage 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 ce n'est plus vrai aujourd'hui.

    tl;dr: utilisation rem

    Unité Aperçu

    Historiquement px unités généralement représenté un dispositif de pixel. Avec des appareils ayant de plus en plus élevées de la densité de pixels ce n'est plus titulaire pour de nombreux appareils, comme avec Écran Retina d'Apple.

    rem unités représentent les root em taille. C'est le font-size de tout ce qui correspond à :root. Dans le cas du HTML, c'est le <html> élément; pour le SVG, c'est la <svg> élément. La valeur par défaut font-size dans chaque navigateur* est 16px.

    Au moment de la rédaction, rem est pris en charge par environ 98% des utilisateurs. Si vous êtes inquiet au sujet de cet autre de 2%, je vais vous rappeler que les media queries sont aussi prise en charge par près de 98% des utilisateurs.

    Sur L'Utilisation De px

    La majorité des CSS exemples sur l'utilisation d'internet px valeurs parce qu'ils étaient le standard de facto. pt, in et une variété d'autres unités pourrait ont été utilisés dans la théorie, mais ils n'ont pas manipuler de petites valeurs bien que vous l'auriez rapidement besoin de recourir à des fractions, qui ont été plus long à taper, et plus difficile à raisonner.

    Si vous voulais une fine bordure, avec px vous pouvez utiliser 1px, avec pt vous auriez besoin d'utiliser 0.75pt pour des résultats cohérents, et que c'est pas très pratique.

    Sur L'Utilisation De rem

    rem's valeur par défaut de 16px n'est pas un argument très fort en faveur de son utilisation. Écrit 0.0625rem est pire que l'écriture 0.75pt, alors pourquoi serait-on utiliser rem?

    Il y a deux parties à rem's avantage sur les autres unités.

    • Les préférences de l'utilisateur sont respectés
    • Vous pouvez modifier l'apparente px valeur de rem à ce que vous souhaitez

    En Respectant Les Préférences De L'Utilisateur

    Zoom du navigateur a beaucoup changé au fil des ans. Historiquement, la plupart des navigateurs serait seulement à l'échelle, en font-size, mais qui a changé assez rapidement lorsque des sites web réalisé que leur beau pixel-perfect dessins ont été la rupture de tout temps quelqu'un zoom avant ou arrière. À ce stade, les navigateurs échelle de l'ensemble de la page, donc de la police en fonction de zoom est hors de l'image.

    Le respect d'un utilisateur souhaite n'est pas hors de l'image. Juste parce qu'un navigateur est configuré pour 16px par défaut, ne signifie pas qu'aucun utilisateur ne peut pas modifier leurs préférences de 24px ou 32px pour corriger la mauvaise vision. Si vous basez vos unités hors de rem, tout utilisateur à une plus grande taille de police verrez une proportionnellement plus grand site. Les frontières seront plus grands, le remplissage sera plus grande, les marges seront plus grands, tout va à l'échelle, de manière fluide.

    Si vous basez vos requêtes de média sur rem, vous pouvez également faire en sorte que le site à vos utilisateurs de voir s'adapte à leur écran. Un utilisateur avec font-size ensemble de 32px sur un 640px large navigateur, qui va effectivement voir votre site comme indiqué à un utilisateur à 16px sur un 320px large navigateur. Il n'y a absolument pas de perte de PA en utilisant rem.

    Changement Apparent px Valeur

    Parce que rem est basé sur le font-size de la :root nœud, si vous souhaitez modifier ce 1rem représente, tout ce que vous avez à faire est de changer le font-size:

    CSS:

    :root {
  font-size: 100px;
}
body {
  font-size: 1rem;
}

    HTML:

    <p>Don't ever actually do this, please</p>

    Quoi que vous fassiez, ne pas régler l' :root de l'élément font-size à un px valeur.

    Si vous définissez la font-size sur html à un px valeur, vous avez époustouflé les préférences de l'utilisateur sans un moyen de les récupérer.

    Si vous souhaitez modifier le apparente valeur de rem, utilisez % unités.

    Les maths pour ce qui est raisonnablement simple.

    L'apparente taille de police de :root est 16px, mais disons que nous voulons le changer pour 20px. Tout ce que nous devons faire est de multiplier 16 par une certaine valeur pour obtenir 20.

    Configurer votre équation:

    16 * X = 20

    Et à résoudre pour X:

    X = 20 / 16
X = 1.25
X = 125%

    CSS:

    :root {
  font-size: 125%;
}

    HTML:

    <p>If you're using the default font-size, I'm 20px tall.</p>

    De faire tout en multiples de 20 n'est pas génial, mais une proposition commune est de faire de la taille apparente de rem égal à 10px. Le nombre magique pour qui est 10/16 qui est 0.625, ou 62.5%.

    CSS:

    :root {
  font-size: 62.5%;
}

    HTML:

    <p>If you're using the default font-size, I'm 10px tall.</p>

    Le problème maintenant est que votre défaut font-size pour le reste de la page est trop petite, mais il y a une solution simple pour: Définir un font-size sur body à l'aide de rem:

    CSS:

    :root {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

    HTML:

    <p>I'm the default font-size</p>

    Il est important de noter, à cet ajustement à la place, la valeur apparente de rem est 10px qui signifie que toute la valeur que vous avez écrit, dans px peut être directement converti en rem en cognant une décimale.

    padding: 20px;

    se transforme en

    padding: 2rem;

    L'apparente taille de police que vous choisissez est à vous, donc si vous voulez il n'y a aucune raison que vous ne pouvez pas utiliser:

    :root {
  font-size: 6.25%;
}
body {
  font-size: 16rem;
}

    et ont 1rem l'égalité des 1px.

    Donc là vous l'avez, une solution simple à l'égard de l'utilisateur souhaite tout aussi éviter de faire trop compliquer votre CSS.

    Attendre, alors quel est le piège?

    J'avais peur que vous pourriez lui demander. Autant que je voudrais faire semblant que rem est magique et résout toutes les choses, il ya encore quelques problèmes de note. Rien-la rupture à mon avis, mais je vais l'appeler si vous ne pouvez pas dire que je ne vous avais pas prévenu.

    Requêtes De Média

    L'un des premiers problèmes que vous rencontrerez avec rem implique des requêtes de média. Considérons le code suivant:

    :root {
  font-size: 1000px;
}
@media (min-width: 1rem) {
  :root {
    font-size: 1px;
  }
}

    Ici la valeur de rem change selon que la media-query applique, à la requête des médias dépend de la valeur de rem, donc ce qui sur terre se passe?

    rem dans les requêtes de média utilise la valeur initiale de font-size et ne tient pas compte de tous les changements qui peuvent avoir eu lieu à l' font-size de la :root élément. En d'autres termes, il est évident valeur est toujours 16px.

    C'est un peu ennuyeux, car cela signifie que vous avez à faire certains fractions de calculs, mais j'ai trouvé que la plupart des communes des requêtes de média déjà utiliser les valeurs qui sont des 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 mixin ou des variables à gérer vos requêtes de média, qui masque le problème entièrement.

    La Commutation De Contexte

    Si vous basculez entre des projets différents projets, il est tout à fait possible que l'apparente taille de police de rem auront des valeurs différentes. Dans un projet, vous utilisez peut-être une taille apparente de 10px où dans un autre projet, la taille apparente pourrait être 1px. Cela peut être source de confusion et provoquer des problèmes.

    Ma seule recommandation ici est de rester avec 62.5% pour convertir rem pour une taille apparente de 10px, parce que cela a été plus fréquent dans mon expérience.

    Partagé CSS Bibliothèques

    Si vous écrivez CSS qui va être utilisé sur un site que vous ne contrôlez pas, comme pour une application intégrée, il n'y a vraiment pas de bonne façon de savoir ce que la taille apparente rem aura. Si c'est le cas, n'hésitez pas à continuer à utiliser px.

    Si vous voulez toujours utiliser rem cependant, envisager la libération d'un Sass ou MOINS la version de la feuille de style avec une variable à remplacer la mise à l'échelle pour la taille apparente de rem.

    * je ne veux pas effrayer quiconque loin de l'aide de rem, mais je n'ai pas été en mesure de confirmer officiellement que chaque navigateur utilise 16px par défaut. Vous voyez, il ya beaucoup de navigateurs et il ne serait pas difficile pour un navigateur pour avoir divergé jamais si légèrement à, dire 15px ou 18px. Dans les tests, mais 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 a une valeur autre que 16px. Si vous trouvez un exemple, merci de le partager avec moi.

    • Je sais que c'est tard, mais, j'aime la façon dont l'aide REM, mais je n'ai plus de problème d'utilisation de rem est quand j'utilise matrix() avec le javascript qui est la matrice de traduire les valeurs sont à l'aide de px (corrigez-moi si je me trompe), et je suis tellement confondue avec elle.
    • en JavaScript, vous êtes largement allons utiliser calculé les valeurs des pixels. Ma recommandation est d'alterner les classes où possible, de sorte que le CSS permet de gérer la façon dont les choses tournent. Pour certaines choses, vous ne serez pas en mesure d'éviter d'utiliser JS pour calculer les valeurs de pixel, alors votre meilleur pari qu'il n'y est pour calculer la valeur du pixel du DOM de l'état.
    • Je vois, donc je getComputedStyle() mais le résultat est toujours de pixel, j'ai donc de diviser le résultat par le rem valeur (16). CMIIW
    • seulement si vous êtes en train de générer un rem valeur, si vous avez déjà le bon px valeur, il n'y a pas besoin de passer à rem unités pour des choses qui sont déjà calculées pour le contexte donné.
    • ont 1rem l'égalité des 1px Cela provoque des problèmes à cause de Chrome minimale de la police-taille: stackoverflow.com/questions/44378664/... stackoverflow.com/questions/24200797/...
    InformationsquelleAutor zzzzBov
  3. 41

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

    L'auteur conclut finalement que la meilleure méthode est sans doute d'utiliser les deux px et rem, déclarant px première pour les anciens navigateurs et redeclaring rem pour les navigateurs les 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 */
    • Ouais, c'est ce qui m'a intéressé dans le rem en premier lieu. Deux choses que je ne comprends pas: il conseille comme une unité de mesure pour les polices de caractères (pas d'éléments), et si j'ai bien compris la seule vraie raison de l'utilisation d' (r)em est donc IE les utilisateurs peuvent redimensionner le texte?
    • Je crois que oui. Si pas de texte, redimensionnement, je crois que nous préférons utiliser px. Comme pour l'unité, pour les éléments, s'en tenir à px serait mieux comme vous le feriez habituellement voulez la taille des éléments de précision.
    • Mais si vous le faites, tous les paramètres de votre navigateur, qui redéfinit la police de base-la taille de vis de votre mise en page à droite? Pourquoi ne pas rem's pour tout?
    • Il existe 2 types de zoom. i) le zoom, ce zooms tous les éléments sur votre site proportionnellement, y compris pxéléments prédéfinis. ii) le Texte de zoom, cela ne peut qu'augmenter la taille du texte. Pour cela, seule la taille du texte augmenter alors que l'élément dimensions restent inchangées. em et rem aborde la question de ce dernier.
    • Comme de nombreux commentaires de la note ici que, la raison pour laquelle nous avons besoin de fossé px est de permettre le redimensionnement. Maintenant, si nous utilisons rem, nous avons encore à fournir px de secours (dans les anciens navigateurs). Essentiellement ce que cela signifie, c'est px redimensionnement de soutien est mieux que rem. Les navigateurs les plus récents de soutien px redimensionnement et pour les navigateurs plus anciens de toute façon, nous allons le repli px. Maintenant basée sur la lumière de cette conclusion, je suis très intéressé de savoir, pourquoi utiliser rem? Si je peut voir la lumière au bout du tunnel.
    • Il n'y a aucune garantie que de telles valeurs de 62,5% = 10px. Il n'est valable que lorsque le navigateur par défaut de la taille de la police a été mis à 16px. Alors que c'est la valeur par défaut, il n'est pas garanti.

    InformationsquelleAutor uzyn
  4. 7

    Comme un réflexe de réponse, je recommande l'utilisation de rem, car il vous permet de changer le "niveau de zoom" de l'ensemble du document à la fois, si nécessaire. Dans certains cas, lorsque vous voulez que la taille de l'être par rapport à l'élément parent, puis utiliser em.

    Mais rem soutien est inégale, IE8 a besoin d'un polyfill, Webkit et fait montre d'un bug. En outre, le sous-pixel de calcul peuvent causer des choses comme un pixel lignes disparaissent parfois. Le remède est de code en pixels pour ces très petits éléments. Qui introduit plus de complexité.

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

    Pour certains cas, c'est oui, pour certains cas, il sera pas de.

    Donc, cela dépend de vos besoins, et vous devez le poids des avantages et des inconvénients, parce que l'utilisation de rem et de l'em présente quelques considérations supplémentaires en comparaison à la "normale" des pixels en fonction de flux de travail.

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

    html {
}

body {
  font-size:14px;
}

.someElement {
  width: 12px;
}
    html {
  font-size:1px;
}

body {
  font-size:14rem;
}

.someElement {
  width: 12rem;
}
    InformationsquelleAutor Rolf
  5. 2

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

    Je recommande d'utiliser rem unités pour les polices de caractères, si seulement parce qu'il rend plus facile pour les vous, le développeur, pour changer de format. Il est vrai que les utilisateurs très rarement changer la taille de police par défaut de leur navigateur, et que les modernes zoom du navigateur de mise à l'échelle jusqu' px unités. Mais que faire si votre patron vient à vous et dit: "ne pas agrandir les images ou d'icônes, mais faire toutes les polices de caractères plus grande". Il est beaucoup plus facile de simplement changer la racine de la taille de la police et de laisser toutes les autres polices d'échelle par rapport à celle, ensuite, de modifier px tailles dans des dizaines ou des centaines de règles css.

    Je pense qu'il a encore un sens à l'utilisation px unités de certaines images, ou pour certains éléments de mise en page qui doit toujours être de la même taille quelle que soit la portée de la conception.

    Caniuse.com peut-être dit que seulement 75% des navigateurs quand josh3736 posté sa réponse en 2012, mais à compter du 27 Mars ils prétendent 93.78% de soutien. Seulement IE8 ne le supporte pas parmi les navigateurs, ils de la piste.

    • Only IE8 doesn't support it among the browsers they track. Hein? La page liée stipule que “, IE9 & IE10 ne pas soutenir rem parts au moment de servir dans la police d'abréviation de la propriété ou lorsqu'il est utilisé sur les pseudo-éléments. IE9, 10 & 11 dont le soutien rem parts lorsque utilisé dans la hauteur de la ligne de propriété lorsqu'il est utilisé sur :before et :after pseudo-éléments. Les frontières de la taille réelle disparaissent lorsque la page est un zoom dans le navigateur Chrome. Ne fonctionne pas sur Samsung Note II Android 4.3 navigateur & Samsung Galaxy Tab 2 sur Android 4.2. Chrome 31-34 & Chrome Android (comme 4.4) ont la taille de police bug survenant lors de l'élément racine a basés sur un pourcentage de la taille.”
    • Aussi, liés à votre as of March 27 they claim 93.78% support. Au moment de la rédaction de ce commentaire, caniuse montre simplement 91.79% de la pleine prise en charge du navigateur. En regardant votre pourcentage, Im assez sûr que vous avez inclus le buggy prise en charge du navigateur trop (actuellement à 2,8%, ce qui pourrait être interprété comme un optimiste de 94,6% de l'ensemble de la couverture – mais le fait est que ceux de 2,8% venir avec buggy, incomplète, voire complètement à défaut de soutien... comme indiqué dans mon commentaire précédent: chaque bug être le résultat de différentes de la version du navigateur et du système d'exploitation combinaisons.) Vous pourriez vouloir corriger votre réponse en conséquence...
    InformationsquelleAutor Joshua Carmody
  6. 1

    J'ai trouvé la meilleure façon de programmer la taille de la police d'un site web sont à définir une base de taille de police pour le body et ensuite utiliser em (ou rem) pour tous les autres font-size je déclare par la suite. C'est une préférence personnelle, je suppose, mais ça m'a bien servi et aussi il est très facile d'intégrer un plus responsive design.

    La mesure où l'utilisation rem parts aller, je pense qu'il est bon de trouver un équilibre entre le fait d'être progressif dans votre code, mais aussi à offrir un soutien pour les anciens navigateurs. Consultez ce lien sur les navigateurs pris en charge pour rem parts, qui devrait aider à une bonne quantité sur votre décision.

    • Ok. Mais le responsive design est tout aussi facile à faire avec des px à droite (il suffit d'écrire vos requêtes de média basé sur px au lieu de em)?
    • Vous pouvez, cependant, si vous voulez faire de votre taille de police plus petite que votre site web de la largeur de la fenêtre d'affichage devient plus petit, vous pouvez ensuite modifier la body taille de police et tout change avec elle.
    • Je ne suis pas vraiment inquiet à propos de prise en charge du navigateur. Je vais inclure un secours px taille pour toutes les tailles, de sorte que les navigateurs plus anciens ont quelque chose à interpréter.
    • Puis aller pour la progressive par l'utilisation du rem. Tant que vous fournir une solution de repli, alors je ne vois pas de mal. Pour moi si il semble juste comme travail supplémentaire, mais peut-être pas dans votre situation.
    InformationsquelleAutor cereallarceny
  7. 0

    pt est similaire à rem, en ce qu'elle est relativement fixe, mais presque toujours DPI-indépendante, même lorsque la non-conforme navigateurs traiter px dans un dispositif dépendant de la mode. rem varie avec la taille de la police de l'élément racine, mais vous pouvez utiliser quelque chose comme Sass/Compass pour ce faire automatiquement avec pt.

    Si vous avez eu ce:

    html {
    font-size: 12pt;
}

    puis 1rem serait toujours 12pt. rem et em sont uniquement comme appareil indépendant que les éléments sur lesquels ils se fondent; certains navigateurs ne se comportent pas selon les spécifications, et de traiter px littéralement. Même dans les vieux jours de la Web, 1 point a toujours été considéré comme 1 /72e de pouce--c'est, il y a 72 points dans un pouce.

    Si vous avez un vieux, non conforme navigateur, et vous avez:

    html {
    font-size: 16px;
}

    puis 1rem va être dépendant du périphérique. Pour les éléments qui héritera de html par défaut, 1em serait également dépendant du périphérique. 12pt serait le espérons garantie indépendante de l'appareil équivalent: 16px /96px * 72pt = 12pt, où 96px = 72pt = 1in.

    Il peut être assez compliqué de faire le calcul si vous voulez coller à 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:

    • Utilisation pt pour les tailles absolues. Si vous avez vraiment besoin de cette dynamique par rapport à l'élément racine, vous vous posez trop de CSS; vous avez besoin d'un langage qui se compile en CSS, comme Sass/SCSS.
    • Utilisation em pour les tailles relatives. C'est assez pratique pour être en mesure de dire, "je veux que la marge sur la gauche à environ la largeur maximale d'une lettre," ou, "Faire de ce texte de l'élément de juste un peu plus grand que son environnement". <h1> est un bon élément sur lequel utiliser une taille de police dans les ems, depuis qu'il peut apparaître dans divers endroits, mais doit toujours être plus grand que le voisin de texte. De cette façon, vous n'avez pas à avoir une taille de police pour chaque classe qui est appliqué à h1: la taille de la police va s'adapter automatiquement.
    • Utilisation px pour les très petites tailles. À de très petites tailles, pt pouvez obtenir des flous dans certains navigateurs à 96 DPI, depuis pt et px n'est pas tout à fait alignés. Si vous souhaitez simplement créer un mince, d'un pixel de la frontière, dites-le. Si vous avez une haute résolution d'affichage, ce ne sera pas évident pour vous, alors assurez-vous de tester sur un générique de 96 PPP affichage à un certain point.
    • Ne parlez pas de sous-pixels pour faire des choses de fantaisie à haute résolution affiche. Certains navigateurs pourraient soutenir, particulièrement à haute résolution affiche--mais c'est un non-non. La plupart des utilisateurs préfèrent le grand et clair, même si le web nous a enseigné les développeurs autrement. Si vous souhaitez ajouter étendue de détail pour vos utilisateurs avec l'état-of-the-art des écrans, vous pouvez utiliser des graphiques vectoriels (lire: SVG), que vous devriez faire de toute façon.
    • pt est pour les médias imprimés et ne devraient pas être utilisées pour les écrans
    • CSS définit pt et px tels qu'ils ont toujours le même rapport, en dépit de ce qui n'est pas techniquement précises de l'utilisation de ces termes (72pt = 96px = 1 pouce). En fait, dans le CSS, px n'est pas vraiment un appareil unique pixel. Sur mon écran, 1px est de 2 pixels appareil. L'avantage de l'utilisation de pt plus de px est que vous pouvez facilement spécifier des tailles de l'élément par rapport à un texte liés à la taille.
    InformationsquelleAutor Zenexer
  8. -1

    De la moitié (mais seulement la moitié) sarcastique réponse (l'autre moitié est amer mépris de la réalité de la bureaucratie):

    Utilisation vh

    Tout est toujours de la taille de la fenêtre du navigateur.

    Toujours autoriser le défilement vers le bas, jamais vers le côté.

    Jeu de largeur de corps à être statique 50vh, et rien de flotteurs ou des ruptures de la div parent. Et le style uniquement à l'aide de tableaux, donc tout est maintenues fermement en place comme prévu. Inclure une fonction javascript pour annuler ctrl+/- de l'activité de l'utilisateur peut faire.

    Tout le monde vous déteste, sauf les gens qui vous disent de faire les choses correspondent à leur mock-up, et ils seront en extase. Et tout le monde sait que leur opinion est la seule qui compte.

    InformationsquelleAutor liljoshu
  9. -3

    Oui. Ou, plutôt, non.

    Heu, je veux dire, il n'a pas d'importance. Utiliser les sens pour votre projet particulier. PX et EM ou les deux également valables, mais va se comporter de manière un peu différente en fonction de l'ensemble de votre page CSS architecture.

    Mise à JOUR:

    De préciser, je suis en déclarant que généralement il est probable n'a pas d'importance qui vous utilisez. Parfois, vous pouvez spécifiquement voulez choisir l'un sur l'autre. EMs sont très bien si vous pouvez commencer à partir de zéro et que vous souhaitez utiliser une police de caractères de taille et de tout faire par rapport à ça.

    PXs sont souvent nécessaires quand vous êtes à la rénovation d'une refonte sur un code existant de la base et de la nécessité de la spécificité de px à prévenir la mauvaise imbrication des questions.

    • Si votre réponse est qu'il n'a pas d'importance? Ou il y a certaines situations dans lesquelles vous serait la valeur de l'un sur l'autre? Et si oui, dans quelles situations est-ce le cas?
    • oui, il peut y avoir des moments que vous souhaitez utiliser l'un ou l'autre. J'ai mis à jour ma réponse avec plus d'info.
    • Désolé, je suis un peu confus avec le libellé original. Il pense que vous avez eu REM dans le titre et de l'EM dans le corps. Il apparaît, vous demandant explicitement à propos de REM. La réponse est toujours à peu près la même, mais REM a quelques avantages supplémentaires, mais est principalement utilisé les mêmes que EM--il vous permet d'utiliser une "base" taille de la police.
    • Pourquoi "em est [...] bien si vous pouvez commencer à partir de zéro et que vous souhaitez utiliser une police de caractères de taille et de tout faire par rapport à cela."? Quel est l'avantage de la (r)em plus de px? Est-il si IE les utilisateurs peuvent redimensionner le texte, ou il y en a d'autres avantages par rapport px (ce qui semble être le plus simple)?
    • EM et REM ont le même avantage: vous pouvez définir le HTML ou le CORPS d'une taille de police spécifique (dire 10px) et ensuite tout le reste défini comme un EM ou REM. De cette façon, si vous voulez faire tous les type proportionnellement plus grand, il suffit de changer qu'une première 10px style 11px. C'était bien plus utile il y a 5 ans, quand nous étions tous à la construction de notre propre JS police basée sur le redimensionnement des widgets. Ces jours, les navigateurs ne tel un meilleur travail au zoom (notamment mobiles), que je trouve beaucoup moins de prestations. Si vous trouvez PX plus simple, alors que c'est un avantage pour vous et certainement une raison valable pour aller avec le PX.
    • Ok, alors que d'autres questions d'accessibilité pour les (anciennes versions de IE et de redimensionnement proportionnel, le (r)em n'a pas d'avantages par rapport à un px-fondé de la conception?
    • Les avantages sont toutes centrées sur et vraiment s'appliquent uniquement pour les développeurs. Un utilisateur final probablement ne se soucient pas du tout ce que l'unité de mesure utilisée pour définir les polices. Mon vote est d'utiliser ce qui fait sens pour vous et ne pas trop penser à elle.
    • Aimerait entendre de bas électeurs sur celui-ci.

    InformationsquelleAutor DA.
  10. -4

    em sont la voie à suivre, et pas seulement pour les polices de caractères, mais vous pouvez aussi les utiliser avec des boîtes, l'épaisseur de la ligne et d'autres trucs aussi, pourquoi?

    Mettre simplement em sont les seuls que l'échelle à l'unisson avec le alt+ et alt - clés dans le navigateur pour le zoom.

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

    Sur une note de côté, si vous voulez le meilleur en matière de mise à l'échelle, aussi convertir vos graphiques à vectoriels SVG si possible aussi que ces proprement échelle avec les navigateurs de zoom.

    • Mais la plupart des navigateurs d'aujourd'hui, zoom sur l'ensemble des éléments de page également (sauf si vous réglez la base de la taille de police), de sorte que l'avantage de l'utilisation de (r)em n'est pas vrai pour les navigateurs modernes droite?
    • Il est et il n'est pas, alors que le bon dans ce que vous dites, c'est plus sur le facteur d'échelle, par opposition à la mise à l'échelle du delta. Le delta sera toujours uniforme quelle que soit la mesure utilisée, mais le facteur d'échelle (à condition que les mathématiques sont fait correctement) permettra d'ajuster au besoin pour dire un grand moniteur vs un moniteur standard, ou un rectangle de pixels vs pixels carrés. Parce que rems sont en fait basées sur des imprimantes véritable mesure ensuite de mise à l'échelle sera toujours une belle forme, d'autres (comme %) sont souvent, au mieux, un delta offset
    • (suite) avec la multiplication appliquée dans les deux directions, et comme un résultat peut dans certains cas donner un mal disproportionné de visualisation d'image.
    • "En termes simples em sont les seuls que l'échelle à l'unisson avec le alt+ et alt - clés dans le navigateur pour zoomer." = c'est incorrect.
    • Ok donc je pourrais avoir rédigé mieux, voir mon commentaire précédent pour la correction.
    • Peut-être que vous pourriez modifier votre réponse? Aussi, em ou rem?
    • ce qui, pour???????
    • ok, donc il semble que le commentaire nazis sont toujours en vigueur à l'époque. Quand VA AINSI de la FORCE DOWNVOTERS POUR EXPLIQUER la RAISON DE LA DOWNVOTE. Je n'ai pas de problème avec le fait d'être downvoted quand il est considéré comme un downvote est donné, MAIS j'AI UN PROBLÈME avec les lâches. Lâche Nazi Commentaire Rep Chasseurs qui n'ont rien de mieux à faire que d'aller autour d'une baisse de vote des peuples des commentaires, peu IMPORTE COMBIEN de temps ILS ont ÉTÉ assis là avec explication. Montrez-vous et EXPLIQUEZ VOS RAISONS!!!

    InformationsquelleAutor shawty
  11. -5

    EMs sont la SEULE chose qui les échelles pour questions des médias qui manipulent +/- mise à l'échelle, que les gens font tout le temps, et pas seulement des personnes aveugles. Voici un autre très bien écrit professionnel de la démonstration de pourquoi cela est important.

    Par la voie, c'est pourquoi Zurb Foundation utilise ems, tandis que l'inférieure Bootstrap 3, toujours utilise des pixels.

    • Ce n'est pas vraiment correct. Vous avez autrefois, les pixels ne pouvait pas être agrandie dans les anciennes versions d'IE. +/- le fait maintenant un zoom pleine page dans tous les navigateurs actuels, donc ce n'est pas un problème. En outre, cette question est sur le rems plutôt que px - pas em vs px.
    • Les gars, vous me faites rire. Avez-vous déjà essayé de faire évoluer votre site à l'aide de +/- à l'aide de pixels? L'écriture à propos de pixels zoom est complètement erroné. En bas de voter de moi tout ce que vous voulez. Les Votes ne changent pas la réalité.
    • Peut-être que nous sommes à parler des choses légèrement différentes - toute chance que vous pouvez mettre en place une simple démonstration pour démontrer la différence?
    • Je ne pense pas que la question est à propos de ce que les unités à utiliser dans les requêtes de média...
    InformationsquelleAutor robmuh