Introduction to the application of length units in CSS

This article brings you an introduction to the application of length units in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

There are many properties in CSS that can accept length values, such as: width, height, margin, padding, border-width, font-size, text-shadow. Because there are many usage scenarios, CSS also provides many length units. Some are units used in daily life, such as centimeters (cm) and inches (in); some are units used in the printing industry, such as point (pt) and pica (pc); some are units specially invented for CSS, such as: px .

Usage scenarios

So how do these attributes and units be used together? Do specific properties require specific units? In fact, this is not the case. The unit has nothing to do with the attribute. Any unit is applicable to the same attribute. There is no limit on when to use which unit. If the attribute accepts a value in px (for example: margin: 5px), then it can also be accepted. Value in inches or centimeters (margin: 1.2in; margin: 0.5cm), and vice versa.

Although the unit has nothing to do with attributes, it has a certain relationship with the output medium, such as whether the output is to the screen or paper. The recommended units are different when displayed on the screen and when printed on paper. The following table gives recommended usage:

In addition to the relationship with the output medium, these units can be distinguished into absolute units and relative units based on the calculation method of length values.

Absolute units

Absolute units (px, cm, mm, in, Q, pt and pc) mean that the length value in this unit is different from the physical The length is equal, for example, width: 1cm is equal to the length of 1cm in the real world, which also means that the display effect of absolute units on all media is consistent. But this is an ideal situation. Due to differences in displays and CSS implementations in different browsers, the absolute unit display is not accurate on many devices. Because the relationship between px and in is 1in=96px, on low-resolution devices, 1px is the length of 1 pixel (pixel, which is also the origin of the name px), and 1px on low-resolution screens is often greater than 1 /96in, so other absolute unit values ​​calculated from px are not accurate. On high-resolution devices (such as today's high-definition screens and printers) absolute units are displayed more accurately. For the above reasons, absolute units are more commonly used when printing.

Once upon a time, CSS required absolute units to be displayed correctly on the computer screen. However, since most manufacturers were unable to implement this requirement, CSS gave up this requirement in 2011. Currently, absolute units only work properly on print and high-resolution devices. CSS doesn't clearly define what "high resolution" means. However, since low-end printers currently have 300 dpi dots per inch and high-end screens have 200 dpi dots per inch, the so-called "high resolution" is probably somewhere in between. .

The direct conversion formula for absolute units is posted below:

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

px

As the most commonly used unit in CSS, it is necessary to say a few more words 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 is not necessarily equal to 1 pixel (for example, 1px = 2 pixels on a 4.7-inch iPhone);

3. For image display, 1px = 1 image pixel, for example: a The CSS width and height of a 600x400 resolution photo are 600px and 400px (1200x800 pixels are used to display on a 4.7-inch iPhone);

Relative unit

Relative units mean that length values ​​are calculated based on 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 the element. If the font-size of the element is 2cm, then 1em means 2cm. em can be used to control the size, such as margin: 1em; text-indent:1.5em. At this time, these sizes are related to the font size of the element, so on large screens (larger font sizes) and small screens (Smaller font size) will scale proportionally, so em can be used for responsive design. If em is used directly for the font-size attribute, such as font-size: 2em, then em is expressed as the size of the parent element's font.

ex is rarely used. The size of ex representation is related to the x-height of the font. x-height is roughly equal to the height of the lowercase letters in the font (such as a, c, m, or o). The x-height of different fonts with the same font-size may be very different, so there is great uncertainty in the effect of using ex.

rem

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

ch

ch uses less tables. It is a newly added unit in CSS3 and represents the width of "0" (zero, unicode character U 0030) in the current font.

Viewport Based

vw, wh, vmin, vmax

are all newly added units in CSS3. vw, vh can adjust the font size according to the 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, and the opposite is vmax. These units are supported on most current browsers.

The above is the detailed content of Introduction to the application of length units in CSS. For more information, please follow other related articles on the PHP Chinese website!