Différences dans l'utilisation des unités CSS3 de poids moyen

Cette fois, je vais vous présenter les différences dans l'utilisation des unités CSS3 de poids moyen. Quelles sont les précautions lors de l'utilisation des unités CSS3 de poids moyen. Voici des cas réels, jetons un coup d'œil.

px : unité absolue, la page est affichée en pixels précis

em : unité relative, le point de référence est la taille de police du nœud parent, si vous définissez font-size appuyez sur Calculez-le vous-même (la police par défaut du navigateur est 16px), 1em n'est pas une valeur fixe dans toute la page.

rem : Unité relative, qui peut être comprise comme "root em". Elle est calculée par rapport à la taille de la police du nœud racine HTML. CSS3 a un nouvel attribut et est pris en charge par chrome/firefox/IE9+.

(De plus, veuillez noter que Chrome force la taille de police minimale à être de 12. Même si elle est définie sur 10 px, elle finira par s'afficher à 12 px. Lorsque la taille de police du HTML est défini sur 10 px, le calcul du nœud enfant rem est toujours basé sur 12 px. À titre de référence, de nombreux articles sur Internet mentionnent qu'il n'est pas conseillé de définir la taille de police du HTML sur 10 pour faciliter le calcul).

L'application Rem sur terminal mobile peut faire référence à la page Taobao http://m.taobao.com (taille de police HTML passée Dynamic acquisition de calcul)

Repère de page 320px (20px), calcul de la valeur de la taille de la police HTML :

var ele=document.getElementsByTagName("html")[0],    
     size=document.body.clientWidth/320*20;    
ele.style.fontSize=size+"px"

Remarque : le ratio de mise à l'échelle méta doit être défini sur 1 :1

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw : largeur du point de vue, largeur de la fenêtre, 1vw est égal à 1% de la largeur de la fenêtre.

vh : hauteur du point de vue, hauteur de la fenêtre, 1vh est égal à 1% de la hauteur de la fenêtre.

vmin : Le plus petit de vw et vh.

vmax : Le plus grand de vw et vh.

vw, vh, vmin, vmax : prise en charge partielle d'IE9+, prise en charge de chrome/firefox/safari/opera, prise en charge d'iOS safari 8+, Androidprise en charge du navigateur 4.4+, prise en charge de chrome pour android39

Les autres unités incluent :

% : pourcentage

po : pouce

cm : centimètre

mm : millimètre

pt:point, environ 1/72 de pouce

pc:pica, environ 6pt, 1/6 de pouce

ex : Prendre la hauteur x de la police de l'effet actuel, en Si la hauteur x ne peut pas être déterminée, elle est calculée à 0,5em (non pris en charge par IE11 et versions antérieures, firefox/chrome/safari/opera/ios safari/android browser4.4+, etc. nécessitent tous des attributs et des préfixes)

ch : Basé sur le caractère "0" dans la police utilisée par le nœud, s'il est introuvable, il s'agit de 0,5em (pris en charge par ie10+, chrome31+, safair7.1+, opera26+, iOS safari 7.1+, Navigateur Android4.4+)

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de la fonction CSS3 shadow box-shadow

Réalisation d'un album photo 3D effect

Comment utiliser l'attribut zoom ou overflow:auto en CSS

Simulation 2D pour réaliser une animation de rotation de la grande roue effets spéciaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!