Introduction à l'application des unités de longueur en CSS

Cet article vous apporte une introduction à l'application des unités de longueur en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Il existe de nombreuses propriétés en CSS qui peuvent accepter des valeurs de longueur, telles que : width, height, margin, padding, border-width, font-size, text-shadow. Comme il existe de nombreux scénarios d'utilisation, CSS fournit également de nombreuses unités de longueur. Certaines sont des unités utilisées dans la vie quotidienne, comme les centimètres (cm) et les pouces (in) ; certaines sont des unités utilisées dans l'industrie de l'imprimerie, comme le point (pt) et le pica (pc) ; certaines sont des unités spécialement inventées pour le CSS, comme ; comme : px .

Scénarios d'utilisation

Alors, comment ces attributs et unités peuvent-ils être utilisés ensemble ? Des propriétés spécifiques nécessitent-elles des unités spécifiques ? En fait, ce n'est pas le cas. L'unité n'a rien à voir avec l'attribut. Toute unité est applicable au même attribut. Il n'y a pas de limite quant au moment d'utiliser quelle unité si l'attribut accepte une valeur en px (par exemple). : marge : 5px), alors elle peut également être acceptée Valeur en pouces ou en centimètres (marge : 1,2 pouces ; marge : 0,5 cm), et vice versa.

Bien que l'unité n'ait rien à voir avec les attributs, elle a une certaine relation avec le support de sortie, par exemple si la sortie est sur écran ou sur papier. Les unités recommandées sont différentes lorsqu'elles sont affichées à l'écran et lorsqu'elles sont imprimées sur papier. Le tableau ci-dessous donne l'utilisation recommandée :

输出媒介	推荐	偶尔使用	不推荐
屏幕	em, px, %	ex	pt, cm, mm, in, pc
打印	em, cm, mm, in, pt, pc, %	px, ex

En plus de la relation avec le support de sortie, ces unités peuvent être distinguées en unités absolues et unités relatives en fonction de la méthode de calcul des valeurs de longueur.

Unités absolues

Les unités absolues (px, cm, mm, in, Q, pt et pc) signifient que la valeur de longueur dans cette unité est différente de la valeur physique La longueur est égale, par exemple width: 1cm est égale à la longueur de 1 cm dans le monde réel, ce qui signifie également que l'effet d'affichage des unités absolues sur tous les supports est cohérent. Mais il s'agit d'une situation idéale. En raison des différences d'affichage et d'implémentations CSS dans les différents navigateurs, l'affichage des unités absolues n'est pas précis sur de nombreux appareils. Parce que la relation entre px et in est 1in=96px, sur les appareils basse résolution, 1px est la longueur de 1 pixel (pixel, qui est aussi l'origine du nom px), et 1px sur les écrans basse résolution est souvent plus grand que 1/96in, donc à partir de px Aucune autre valeur unitaire absolue calculée n'est exacte. Sur les appareils haute résolution (tels que les écrans et imprimantes haute définition d'aujourd'hui), les unités absolues sont affichées avec plus de précision. Pour les raisons ci-dessus, les unités absolues sont plus couramment utilisées lors de l’impression.

Il était une fois, CSS exigeait que les unités absolues soient affichées correctement sur l'écran de l'ordinateur. Cependant, comme la plupart des fabricants n’ont pas été en mesure de mettre en œuvre cette exigence, CSS y a renoncé en 2011. Actuellement, les unités absolues ne fonctionnent correctement que sur les appareils d'impression et haute résolution. CSS ne définit pas clairement ce que signifie « haute résolution ». Cependant, étant donné que les imprimantes bas de gamme ont actuellement 300 points par pouce dpi et que les écrans haut de gamme ont 200 points par pouce, la "haute résolution" se situe probablement quelque part entre les deux. .

La formule de conversion directe des unités absolues est publiée ci-dessous :

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

px

En tant qu'unité la plus couramment utilisée en CSS, il est nécessaire de dire quelques mots à propos de px. Les caractéristiques du px peuvent être résumées comme suit :

1. Sur les appareils basse résolution, 1px = 1 pixel

2. Sur les appareils haute résolution ; , 1px = 1/96in, 1px n'est pas nécessairement égal à 1 pixel (par exemple, 1px = 2 pixels sur un iPhone de 4,7 pouces

3. Pour l'affichage d'une image, 1px = 1) ; pixel d'image, par exemple : a La largeur et la hauteur CSS d'une photo de résolution 600x400 sont de 600px et 400px (1200x800 pixels sont utilisés pour l'affichage sur un iPhone de 4,7 pouces

Unité relative

Les unités relatives signifient que les valeurs de longueur sont calculées par rapport à d'autres longueurs. Les unités relatives peuvent être divisées en basées sur la police et en fonction de la fenêtre d'affichage :

Basé sur la police

em, ex

Parlons d'abord de em et ex , em représente la taille de police actuelle de l'élément. Si le

de l'élément est font-size, alors 2cm signifie 1em. em peut être utilisé pour contrôler la taille, comme 2cm. À l'heure actuelle, ces tailles sont liées à la taille de la police de l'élément, elles s'adapteront donc de la même manière sur les grands écrans (taille de police plus grande) et les petits écrans (police plus petite). taille), donc em Peut être utilisé pour un design réactif. Si em est utilisé directement dans l'attribut margin: 1em; text-indent:1.5em, tel que font-size, em est exprimé comme la taille de la police de l'élément parent. font-size: 2em

ex est rarement utilisé et la taille de la représentation ex est liée à la hauteur x de la police. La hauteur x est à peu près égale à la hauteur des lettres minuscules de la police (telles que a, c, m ou o). La hauteur x de différentes polices avec le même

peut être très différente, il existe donc une grande incertitude quant à l'effet de l'utilisation de ex. font-size

rem

CSS a créé une nouvelle unité rem en 2013. rem représente la taille de la police de l'élément racine (élément html). Les em peuvent être différents dans chaque élément, mais les rem sont tous. cohérent. Grâce à cette fonctionnalité, rem est désormais plus largement utilisé dans le responsive design.

ch

ch utilise moins de tables. Il s'agit d'une unité nouvellement ajoutée dans CSS3 et représente la largeur de "0" (zéro, caractère Unicode U+0030) dans la police actuelle.

Viewport Based

vw, wh, vmin, vmax

sont toutes des unités nouvellement ajoutées dans CSS3. vw, vh peut ajuster la taille de la police en fonction de la taille de la fenêtre. vw correspond à 1/100 de la largeur de la fenêtre et vh correspond à 1/100 de la hauteur de la fenêtre. De plus, il y a vmin, qui fait référence au plus petit entre vw et vh, et l'opposé est vmax. Ces unités sont prises en charge sur la plupart des navigateurs actuels.

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!