web-dev-qa-db-fra.com

Le débat sur em VS px VS% en typographie est-il toujours valable?

J'ai lu quelques articles sur les raisons pour lesquelles ils sont meilleurs que les px en typographie. Et la base doit être en%, le mieux est même d'avoir body{ font-size:62.5%; }.

L'un des meilleurs articles que j'ai pu trouver se trouve ici: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

En gros, il est dit que le px ne s'adapte pas bien sur les sites Web et les appareils. J'ai toujours fait la typographie en px et je n'ai jamais trouvé de problème. J'ai également travaillé avec des frameworks CSS et des thèmes wordpress, et je constate toujours que seul le px normal est utilisé.

Maintenant, je vois que la plupart des articles sont écrits et que la plupart d'entre eux datent d'il y a quelques années. Je voulais savoir s'il était toujours vrai que le px ne s'adapte pas bien ou s'il ne s'agit plus d'un point pour les navigateurs et les appareils modernes. .


Sur une note de côté. J'ai même lu et vu sur certains sites que les gens vont même jusqu'à faire tout leur style dans em's. Par exemple, le remplissage et les marges se font dans em.

Est-ce nécessaire si vous voulez avoir un bon site Web de mise à l'échelle?.

8
Saif Bechan

Ma réponse, car le texte lui-même est un non catégorique. Les bons navigateurs trichent (comme ils le devraient) lorsqu'il s'agit de redimensionner les polices spécifiées en unités de pixels. Le développeur Web doit rester indépendant de toutes les différences d'appareils sur lesquels le contenu est rendu.

Essayez ceci dans w3Schools éditeur Tryit :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Maintenez ensuite la touche Ctrl enfoncée et faites défiler à l'aide de la molette de la souris ou appuyez sur les touches Ctrl-Numérique +. Ils devraient tous évoluer de manière uniforme dans un bon navigateur.

Il n'est pas garanti que les pixels soient uniformément larges et hauts, mais que la résolution est toujours de 96 ppp, et que les préférences de l'utilisateur peuvent s'appliquer à la réduction ou à la réduction de tout le contenu. Gardant cela à l'esprit, la plupart des navigateurs tiennent compte de ces différences de résolution et adapte la sortie en fonction du matériel/des préférences spécifiques. Si un navigateur appliquait strictement les unités de pixels réelles, le navigateur (ou le périphérique sur lequel il tourne) serait voué à être considéré comme un échec par l'utilisateur final.

Cela dit, sachez que HTML n'est pas optimisé pour la mise à l'échelle, mais pour redistribuer le texte dans la plage de rapports de format de résolution la plus large possible (largeur divisée par hauteur). Les navigateurs diffèrent par le remplissage et les marges de la mise à l'échelle lorsqu'ils sont spécifiés dans des unités différentes. Pour les conceptions réellement évolutives (par exemple, où la position sur l'arrière-plan compte), il convient d'utiliser un format évolutif et non fluide tel que SVG . Faire du rembourrage et des marges en pourcentages est toujours risqué!

Si vous utilisez un fond d'image ou autre, et que vous souhaitez que le remplissage ou la marge ait un nombre spécifique de pixels vers l'intérieur, mon conseil est de vous assurer de spécifier ces marges et le remplissage en unités de pixel!

3
Louis Somers