La commutation de l'Em-Fondé des Requêtes de Média

Question

Maintenant que le WebKit page-zoom bug a été corrigé, quelles sont les principales raisons de l'utilisation de l'em-fondé des requêtes de média plutôt que de pixels en fonction des requêtes de média?

Bounty

Je vais ajouter une prime à ma question, car de nombreuses personnalités CSS cadres et les web développeurs de l'utilisation de l'em-fondé des requêtes de média que je suis convaincu qu'il doit y avoir une bonne raison(s) pour le faire.

Le seul avantage que je suis conscient, c'est que si un utilisateur change la taille de police par défaut dans son navigateur, le contenu va presser dans une manière semblable à ce problème résolu par la page de zoom correction. Est-il données pour montrer aux gens réellement faire changer la taille par défaut plutôt que de zoom?

Note

Pour faire à ma question plus ciblée, j'ai enlevé les deux périphériques. Le post original va ajouter de la perspective à @nwalton grande réponse, qui répond à toutes les trois points que j'ai demandé à ce sujet.

Answer 1

1. Dans les navigateurs modernes, il devrait y avoir aucune différence entre l'em-fondé et basé sur les pixels des requêtes de média si le navigateur gère le zoom correctement. J'ai effectivement eu de la difficulté avec l'em-fondé des requêtes de média dans un projet parce que, dans l'un des médias les requêtes de la base taille de la police, modifié et toutes les autres requêtes de médias a obtenu foiré. Qui pourrait avoir juste été une erreur stupide, mais vous obtenez l'idée. J'irais avec des pixels. Voir mise à jour ci-dessous. Tandis que le zoom ne pas avoir un effet sur les navigateurs modernes, de la base taille de la police est toujours.

2. Le plus gros problème que je vois, vous pourriez rencontrer avec les 62,5% pour la technique et l' rem si vous exécutez dans les navigateurs qui ne le comprennent pas. Si vous êtes inquiet que vous pourriez ajouter une solution de repli pour les moins capables de navigateurs et de définir rem pour les modernes.

   html { font-size: 62.5%; }
   body { font-size: 14px; font-size: 1.4rem; }
   h1   { font-size: 24px; font-size: 2.4rem; }
   

3. Si il n'y a aucune différence dans la façon dont rapidement les navigateurs processus d' px vs em, il n'est pas perceptible. Les navigateurs calculer CSS très, très vite (beaucoup plus vite que JS). Donc ce n'est probablement pas la peine de s'inquiéter au sujet de.

   ---

Mesure les avantages, les inconvénients, et utilise

px

Je l'ai utilisé, px pour questions des médias, dans le passé, parce qu'ils sont si fiables et, comme vous le dites, ils zoom amende juste. Mise à jour: Toutefois, si un utilisateur modifie leur feuille de style par défaut, vos requêtes de média sera éteint.

• Indépendant de la cascade CSS
• La plupart non-mesure relative (tout dépend de la façon dont le navigateur mesures de police en pixels)
• Zoomable dans tous les navigateurs modernes

em

Ems sont impressionnant pour la fabrication de flexibles, des grilles et des mesures. Par exemple, si un conteneur largeur est spécifié dans les ems, je peux redimensionner proportionnellement le récipient et son contenu dans mes requêtes de média avec une déclaration.

• Répond à la cascade CSS
• Par rapport au conteneur de taille de police
• Zoomable dans tous les navigateurs modernes

Dans cet exemple, le redimensionnement de la police redimensionne également de son récipient qu'en proportion.

h1.title {
  font-size: 2em;
  width: 20em;
  background-color: #baff1e;
}

@media (min-width: 400px) {
  h1 {
    font-size: 2.5em
  }
}

rem

Je n'ai pas réellement utilisé rem beaucoup, mais je peux voir pourquoi beaucoup de gens l'aiment. Vous avez la puissance d'une unité relative, mais vous n'avez pas à traiter avec le truc de dingue ce qui peut arriver lorsque vous jeter dans la cascade CSS.

Dimensionnement des choses basées sur le navigateur de la base taille de la police semble que le web-les normes de chose à faire, parce que vous permettez pour les navigateurs dont optimale de la base taille de la police peut ne pas être 16px. Dans la pratique, cependant, il fonctionne dans l'autre sens. De ce que j'ai vu, les navigateurs utilisent 16px de la base taille de la police parce que c'est ce que tout le monde attend, et de définir la taille réelle de la CSS de mesure de regarder décent dans le navigateur.

• Indépendant de la cascade CSS
• Par rapport à la base de la taille de police
• Zoomable dans tous les navigateurs modernes

---

Une note sur la 62.5% technique

Cela a été autour depuis un certain temps, et maintenant je ne sais pas aucune raison de ne pas l'utiliser. Il y avait un 2007 article sur Une Liste à Part , où ils ont fait des tests et constaté que les tailles de police affichés de manière plus fiable sur tous les navigateurs lorsque la police de base a été déclarée 100% et le texte était de taille moyenne, en em. Mais je serais surpris si l'un des navigateur les contraintes qui y sont énumérées sont vraiment plus d'actualité. Je dois encore un moment difficile de se sentir bien à propos de la configuration de ma base de taille de police sur 10px, mais c'est probablement juste une préférence personnelle.

---

Mise à jour

Après avoir fait quelques tests, je suis d'inversion de ma pratique de l'utilisation de pixels pour questions des médias. Je suis maintenant recommander em:

1. Utilisateurs de changer de base de taille de police. Un thread sur l'Mozilla réseau de soutien, "Comment puis-je augmenter le navigateur par défaut de la taille de la police?" a plus de 5 000 points de vue. Et un fil similaire a plus de 15 000. Une autre étude a trouvé un pourcentage d'utilisateurs (de 0,3%) qui n'ont par défaut une taille de police plus petite ou plus grande que la moyenne. Combien de fois les utilisateurs de changer en fait il ne semble pas pertinent (voir un précédent AFIN de répondre). Si certaines personnes le font, c'est probablement la peine de les soutenir.

2. Ems sont probablement plus à l'avenir. Ils vont travailler pour n'importe quel appareil dont optimale taille de police par défaut est de ne pas 16px (ainsi que ceux qui sont).

3. La chose qui me convainc le plus, c'est de le voir en action. Voici un codepen démo. Notez que le navigateur zoom probablement ne fait aucune différence (j'ai testé sur Chrome). Mais si vous allez dans les paramètres de votre navigateur et changer la taille de police par défaut de "moyen" à quelque chose d'autre, les largeurs de voie de loin. À mon avis, c'est inacceptable.

Answer 2

Je n'ai pas encore trouvé de données sur les utilisateurs qui changent leur base taille de la police, mais j'ai fait quelques vérifications sur les pages web qui ont été conçus par des gens qui devraient savoir ce qu'ils font. J'étais à la recherche spécifiquement qu' px ou em à préciser leurs requêtes. Même si cela peut ne pas répondre à la question entièrement, je pense que cela ajoute une certaine dimension intéressante à la discussion.

Certains Grands Joueurs

Cette liste n'est pas exhaustive ou mesurée en aucune façon, sauf qu'elle inclut les noms de personnes ou de groupes sur le dessus de ma tête qui semblent être à l'avant-garde du développement web, ou ont contribué à une conception adaptée à la pratique d'une certaine façon.

• Filament Groupe: em
• Luke Wroblewski: em
• Jeffrey Zeldman: px
• Chris Coyier: em
• Ethan Marcotte (un.k.un. Le Père de Responsive Web Design): px
• Jason Santa Maria: px
• Mark Boulton: px
• Nicolas Gallagher: px

Une chose intéressante à noter est que la dernière entrée, Nicolas Gallagher, est la personne qui a ajouté à la requête de média ligne pour le Boilerplate HTML5 CSS. Dans ce code, il utilise em, bien que sur son site personnel les media queries sont définies en px. J'ai regardé pour les discussions qui s'engagent, mais ne pouvais pas trouver toutes.

Quelques-uns de Leurs Sites

De nouveau, un peu dispersés liste, mais il contient quelques sites que je considère intéressant de regarder. La plupart de ces derniers ont été construits en partie ou en totalité par des personnes de la liste précédente.

• Boston Globe (Filament Group, 2011): px
• Une Liste à Part: em
• dribbble (Dan Cederholm): px
• HTML5 Boilerplate: em
• HTML5 Mobile Standard: px

Une note intéressante avec HTML5 Boilerplate, le projet principal du CSS utilise em , tandis que la version mobile du projet, px.

Méga-Sites

C'était vraiment surprenant de constater combien peu de sites les plus populaires sur le web un support de requêtes à tous. Voici quelques-uns qui n'utiliser les media queries.

• Microsoft: px
• Twitter: px
• Wordpress.com: em
• Adobe.com: px

Conclusion

Pas concluants.

On dirait les gens utilisent les deux méthodes avec succès, et il ne semble pas être d'accord sur les meilleures pratiques.

J'ai le sentiment que certains des plus progressistes, les concepteurs sont en mouvement à l' em, mais je n'ai pas de données pour que d'autres que c'est juste "semble" comme cela peut être le cas. Il pourrait également être vrai que certains des sites mentionnés ci-dessus sont plus âgés que les autres, et n'ont pas été mis à jour depuis que les gens ont commencé à se déplacer à l'em-fondé des requêtes de média. Il est difficile de vraiment obtenir suffisamment de données pour tirer une bonne conclusion sur ce front.

Cependant, le fait que certains des plus grands sites dans le monde sont à l'aide de px me dit que cette approche doit peut-être encore techniquement solide. S'il y a des problèmes avec elle, je suis sûr que les plus gros sites auraient entendu parler de leurs utilisateurs ou de leur mise à l'essai, et a déménagé à quelque chose de plus techniquement viables pour servir de leur public.

Answer 3

Il est l'une des raisons principales pour utiliser EM en fonction des requêtes de média et qui est
respecter les utilisateurs (base), le paramètre de taille de police
sans casser votre disposition!

Vous ne devriez jamais jamais, ni de définir la police-taille en pixel (ni vos éléments largeur/hauteur)!!!
Permettre à l'utilisateur de décider de quelle taille de police, il aime à regarder votre site.

Il est donc une question d'accessibilité.

Si vous utilisez des valeurs de pixel, vous devez assumer une certaine (de base) taille de la police, qui est "normalement" 16px. Mais pas toujours, et c'est le point. Donc, si un utilisateur a choisi un plus petit ou plus grand (de base) taille de la police, votre mise en page va s'écrouler.

Ou sur les systèmes de bureau, si l'utilisateur utilise le navigateur de la fonction de zoom, il aura une barre de défilement horizontale (qui est la plupart indésirables).

Tout cela peut être évité en utilisant des unités relatives, comme EMs. Et ils n'ont que des avantages.

Il est également intéressant de mentionner que fait la police de base réglage de la taille, ainsi que la fonctionnalité de zoom dans les navigateurs mobiles (sur les appareils tactiles comme les tablettes et samrtphones) fonctionnent différemment par rapport à leurs homologues de bureau. Pour le navigateur mobile versions le paramètre taille de la police ne joue pas un rôle aussi important que pour les navigateurs de bureau. Mais encore une fois, vous ne faites rien de mal en utilisant EM en fonction des requêtes de média. Et à mon avis c'est que "l'avenir à l'épreuve" que possible.

Et vous pouvez facilement utiliser la "62.5% technique" ainsi.
Rappelons que la nouvelle "root em" taille de la police dépend de l'élément racine du (de la page) taille de la police et qui est l' html élément, de ne pas l' body élément.

Utiliser le "62,5% pour la technique" sans casser d'accessibilité:

html {
    font-size: 62.5%; /* with the standard base font size of 16px this will be equal to 10px */
}

body {
    font-size: 160%; /* 160% of 10px ~ 16px, understood by all browsers */
    font-size: 1.6rem; /* 1.6 * 10px ~ 16px, understood by all major browsers and IE9+ */
}

Ainsi, vous pouvez utiliser rem tout comme si c' px (divisé par 10),
mais sans faire du mal aux réglages de l'utilisateur!

Peu importe ce que la base de la taille de police que l'utilisateur a choisi la police ratio restera toujours intact.
Et également à votre disposition! ;-)

Une dernière remarque:
Toujours utiliser min|max-width des requêtes de média et de ne jamais device-width! La raison est que vous avez mise en page et le réglage de vos points d'arrêt en fonction de votre contenu et jamais sur les résolutions de tous les appareils!

Ainsi, en utilisant des unités relatives (comme EMs) pour votre mise en page et de taille de police de votre design est vraiment "responsive". En utilisant les unités absolues (comme PX) il n'est pas!