meilleure pratique de la taille de la police pour mobile
J'ai vu cette question sur DONC:
Quelles sont les plus courantes et des tailles de polices pour H1-H6 tags
cela étant recommandé tailles de police fo H tags:
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }
Est-il une "meilleure pratique" pour ces pour les téléphones mobiles? -dites-taille d'écran pour iphone?
- Avec ce que la base de l'em, 16px?
- La seule recommandation que je peux donner est que, oui, ems sont la voie à suivre, pas de pixels que l'autre le laisse entendre la question. Mais il dépend. Par exemple, si le texte dans un h1 est grande (par exemple, une phrase entière) je trouve 2em un peu trop lourd et j'irais avec une taille plus petite.
- Eh bien, vous savez que em est une mesure relative à droite? Donc cadratin (1 em sans base ne signifie rien.
- Pas vrai, désolé.
Vous devez vous connecter pour publier un commentaire.
La taille de la police dans votre question sont un exemple de ce que le ratio de chaque en-tête doit être dans le rapport à l'autre, plutôt que de quelle taille ils doivent être eux-mêmes (en pixels).
Donc, en réponse à votre question "Est-il une" meilleure pratique " pour ces pour les téléphones mobiles? - dites-taille d'écran pour iphone?", oui il y a sans doute - mais vous pourriez trouver ce que quelqu'un dit est "meilleures pratiques" ne fonctionne pas pour votre mise en page.
Cependant, pour vous aider à obtenir sur la bonne voie, cet article sur la construction de réactifs mises en page fournit un bon exemple de la façon de calculer la base
font-size
en pixels par rapport à l'appareil tailles d'écran.L'a suggéré et des tailles de polices pour les résolutions d'écran proposés par cet article sont comme suit:
rem
au lieu deem
.em
hérite de l'objet parent, tandis querem
est directement à partir dehtml
..comme on peut le voir ici dans le violon, j'ai fait jsfiddle.net/5qb4xBasé sur mon commentaire pour la accepté de répondre, il y a beaucoup de pièges potentiels que vous pouvez rencontrer en déclarant à la police-tailles plus petites que
12px
. En déclarant styles qui conduisent à la police de taille inférieure à12px
, comme suit:Vous rencontrez des problèmes avec les navigateurs comme google Chrome avec un pack de langue Chinoise qui rend automatiquement toutes les tailles de police, calculée en vertu de
12px
comme12px
. Donc, la suivante est vraie:J'aimerais également souligner que pour des raisons d'accessibilité, en général, vous ne devriez pas utiliser des tailles de sous 12px. Vous pourriez être en mesure de faire un cas pour les légendes et autres, mais encore une fois--préparez-vous à être surpris dans certaines configurations de navigateur, et prêt à faire de votre grand-mère de plisser les yeux quand elle essaie de lire votre contenu.
Je voudrais au lieu de cela, opter pour quelque chose comme ceci:
Vous trouverez que des tonnes de sites que mettre l'accent sur l'accessibilité, l'utilisation, plutôt de grande taille de la police, même pour
p
éléments.Comme une note de côté, réglage
margin-bottom
égale à lafont-size
généralement tend aussi à être attractifs, à savoir:Bonne chance.
Le tout à em, c'est que la taille est relative à la base. Je dirais donc vous pouvez garder la taille de la police par la modification de la base.
Exemple: Si votre base est 16px, et p est .75em (qui est 12px), vous devez élever la base à propos de 20px. Dans ce cas, p serait alors égal à environ 15px qui est le minimum j'ai personnellement besoin pour les téléphones mobiles.
@media
règle. C'est à propos de l'en-tête-à-ratio normal, et puis vous ne pouvez pas faire mieux que d'utiliser ems.