Talk about length units in CSS

  css

There are many attributes in CSS that can accept length values, such as width, height, margin, padding, border-width, font-size, text-shadow. CSS also provides many length units because of the number of scenes used. Some are units used in daily life, such as centimeters (cm) and inches (in); Some are units used by the printing industry, such as point(pt) and PICA (PC); Some are specially invented units for CSS, such as px.

the usage scenarios

So how do these attributes and units work together? Do specific attributes require specific units? In fact, this is not the case. Units have nothing to do with attributes. Any unit of the same attribute is applicable. There is no limit on when and which unit to use. If an attribute accepts a value in px units (e.g., margin: 5px), it can also accept inches or centimeters (margin: 1.2in); Margin: 0.5cm) and vice versa.

Although the unit has nothing to do with the attribute, it has something to do with the output medium, such as whether the output is screen or paper. The recommended units for displaying on the screen are different from those for printing on paper. The following table gives the recommended usage:

Output medium Recommend Occasional use Not recommended
Screen em, px, % ex pt, cm, mm, in, pc
Print em, cm, mm, in, pt, pc, % px, ex

In addition to the relationship with the output medium, these units can be divided into absolute units and relative units from the calculation method of length value.

Absolute unit

Absolute units (px, cm, mm, in, q, pt and pc) mean that the length value in this unit is equal to the physical length it represents, for examplewidth: 1cmEven if the length is equal to 1cm in the real world, it also means that the display effect of absolute units on all media is consistent. However, this is an ideal situation. Due to the differences in CSS implementation between the display and different browsers, the absolute unit display is not accurate on many devices. Because the relationship between px and in is1in=96pxOn low-resolution devices, 1px is 1 pixel in length, while on low-resolution screens, 1px is often greater than 1/96in, so other absolute unit values calculated from px are inaccurate. On high-resolution devices, such as high-definition screens and printers today, absolute units are displayed more accurately. For the above reasons, absolute units are mostly used in printing.

Once, CSS required absolute units to be displayed correctly on computer screens. However, due to the fact that most manufacturers are unable to meet this requirement, CSS abandoned this requirement in 2011. At present, absolute units only work normally on printing and high-resolution devices. CSS does not clearly define the meaning of “high resolution”. However, since the dots per inch of low-end printers are currently 300 dpi and the dots per inch of high-end screens are 200 dpi, the so-called “high resolution” may be somewhere in between. .

The following is a direct conversion formula for absolute units:

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

px

As the most commonly used unit in CSS, it is necessary to say more about px. The characteristics of px can be summarized as follows:

  1. On low resolution devices, 1px = 1 pixel;
  2. On high-resolution devices, 1px = 1/96in, 1px does not necessarily equal to 1 pixel (for example, 1px=2 pixels on a 4.7 inch iphone);
  3. For picture display, 1px = 1 picture pixel, for example, the CSS width and height of a 600×400 resolution picture are 600px and 400px (1200×800 pixel point display is required on a 4.7 inch iphone);

Relative unit

Relative units mean that length values are calculated from other lengths. Relative units can be divided into font-based and viewport based:

Font Based

em, ex

First, let’s talk about em and ex. em represents the current font size of an element. if thefont-sizeFor2cm, then1emThat is to say2cm. Em can be used to control dimensions such asmargin: 1em; text-indent:1.5emAt this time, these sizes are related to the font size of the elements, so on the large screen (larger font size) and the small screen (smaller font size) they will be scaled proportionally, so em can be used for responsive design. If em is used directly forfont-sizeProperties such asfont-size: 2em, em is expressed as the size of the parent element font.

Ex is rarely used, and the size of ex representation is related to the x-height of the font. X-height is approximately equal to the height of lowercase letters (such as a, c, m, or o) in the font. Samefont-sizeThe x-height of different fonts of the may vary greatly, so the effect of using ex is very uncertain.

rem

CSS created a new unit rem in 2013. rem represents the font size of the root element (html element). em may be different in each element, but rem is consistent. Because of this feature, rem is now more widely used in responsive design.

ch

Ch uses fewer tables and is a newly added unit in CSS3, which indicates the width of “0” (zero, unicode character U+0030) in the current font.

Viewport Based

vw,wh,vmin,vmax

They are all newly added units in CSS3. Vw, vh can adjust font size according to window size. Vw is 1/100 of the width of the window, and vh is 1/100 of the height of the window. In addition, there is vmin, which refers to the smaller one between vw and vh, as opposed to vmax. These units are currently supported by most browsers.