Maison > interface Web > tutoriel CSS > le corps du texte

L'expérience utilisateur passe en premier, la taille de la police abandonne px et choisit l'échange em_Experience

WBOY
Libérer: 2016-05-16 12:06:24
original
1534 Les gens l'ont consulté

À l'ère d'Internet d'aujourd'hui qui prône la conception de la convivialité et la conception de l'expérience utilisateur, CSS doit également y participer. La plupart des gens définissent toujours la taille globale de la police en premier lors de l'écriture du code CSS. Dans les cas chinois, elle est généralement de 12 pixels. Cependant, en fait, le paramètre « Afficher la taille du texte » dans le menu supérieur d'IE n'a aucun effet. Il s’agit sans aucun doute d’une très mauvaise expérience utilisateur pour les téléspectateurs qui estiment que la taille de la police est trop petite. En fait, tout cela peut être évité, c'est-à-dire utiliser les unités em comme unités d'affichage des polices.

La hauteur de police par défaut du navigateur est de 16px, donc le navigateur non ajusté affiche 1em=16px. S'il est converti, cela signifie 1px=0,0625em, c'est-à-dire 12px=0,75em, 10px=0,625em. Grâce à 1px=0,0625em, vous pouvez convertir px en em lors de l'écriture de CSS. Mais il existe un moyen plus pratique, continuez à lire !

Cette méthode nécessite l'utilisation de l'unité % (une seule fois). En fait, % et em peuvent être compris simplement car le premier n'a que deux zéros de plus que le second. Afin de simplifier la conversion de font-size, vous pouvez déclarer font-size=62.5% globalement dans le corps en CSS. L'algorithme % est ici le même que em, 100%=16px, 1px=6.25%, 10px=62.5. %, Autrement dit, la taille de police par défaut est définie sur 10 px. De nombreux débutants peuvent définir 0,625em ici ou définir directement 12px. Assurez-vous de définir font-size=62,5% ! Puisque em a la particularité d'hériter de la taille de police de l'élément de fond perdu parent, qui est 1em=10px, donc 12px=1.2em. La conversion entre px et em peut s'obtenir via 10, ce qui est très pratique !

De plus, une chose doit être notée. Il se peut que lorsque IE traite les caractères chinois, la précision des valeurs à virgule flottante soit limitée à 62,5% des polices 12px sous le corps sont un peu plus grandes que. ceux directement définis pour autant que le Juste change de 62,5% à 63%. Grâce aux ajustements ci-dessus du code CSS, vous constaterez que votre site Web se rapproche de la conception de l'expérience utilisateur. Ceci est très important à l'ère d'Internet d'aujourd'hui qui prône la conception de la convivialité et la conception de l'expérience utilisateur.


[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]
Étiquettes associées:
em px
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal