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 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:
On low-resolution devices, 1px = 1 pixel;
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);
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.