1 Introduction
In front-end development, you will encounter various types of length units, such as px, em, rem, etc.
The overall length unit is divided into two categories:
Absolute length units include: in, cm, mm, q, pt, pc, px
Relative length units include: em, rem, %, vw, vh, vmax, vmin, vm, ch, ex
2) Absolute length
An absolute unit of length is a fixed value that reflects a real physical size. Absolute length units depend on the output medium and do not depend on the environment (monitor, resolution, operating system, etc.).
1.px pixel (Pixel)
px actually means pixel, the full name is pixel, which is the basic sampling unit of an image. For different devices, its image basic unit is different, such as monitors and printers. The monitor resolution we usually refer to refers to the resolution set by the desktop, not the physical resolution of the monitor, but now our desktop resolution and physical resolution are almost the same, because the display effect is the best. So in general, px corresponds to the resolution of our display. In this way, there will be a problem that if we use px, we have to adapt according to the resolution of different computers, which is a bit troublesome.
The smallest unit of px is 1, so decimal measurements are meaningless.
Relative to the monitor screen resolution. px is the smallest point of a picture, and a bitmap is composed of tens of thousands of such points. For example, the computer pixel that is often heard is 1024x768, which means 1024 pixels in the horizontal direction and 1024 pixels in the vertical direction. is 768 pixels.
2.pt (point pound )
A unit of physical length. It refers to one-72th of an inch, pt=1/72 (inch).
in: inch (Inch), absolute length unit
cm: centimeter (Centimeter), absolute length unit.
mm: Millimeter, absolute length unit.
Q: 1/4mm
pt: Point (Point), about 1/72 inch, absolute length unit.
pc: Pica, about 6pt, 1/6 inch, absolute length unit. It is equivalent to the size of my country's new No. 4 lead type.
px: Pixel (Pixel), relative to the length unit of the device, the pixel is relative to the screen resolution of the display. For example, the resolution used by WONDOWS users is generally 96 pixels/inch. The resolution used by MAC users is generally 72 pixels per inch.
Conversion ratio: 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px
3) relative length
There is a benchmark for relative length
1.em
Relative to the font-size property of the container, if the font-size property is not set, it is relative to the default font size of the browser.
Equivalent to "times", for example, if the font size of the current div is set to 1.5em, the font size of the current div will be
The font size is: the font size inherited by the current div * 1.5 times.
Can be specified to three decimal places, such as "1.234em"
The default font size of general browsers is 16px, then 1em = 16px, 2em = 32px
If the user changes the size of the text through the browser's UI controls (zoom page), then our entire page will also be zoomed in (or zoomed out). Compatibility: good
Example:
Output text with 3 font sizes in the browser to show the function of em.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience em</title>
<style>
<style>
.div{font-size:30px;}
.p{font-size:2em;}
.span{font-size:0.5em;}
</style>
</style>
</head>
<body>
<div class="div">The text size in the div tag is 30px
<p class="p">The text size in the P tag is 2rem
<span class="span">The text size in the span tag is 0.5rem</span>
</p>
</div>
</body>
</html>
browser display content
2.rem
r is the meaning of root, which is to scale relative to the font-size attribute of the root node. If there are nested relations
system, the font size of elements in a nested relationship is always scaled according to the font-size property of the root node.
As long as the root element is modified, all font sizes can be adjusted proportionally, and the chain reaction of font size compounding layer by layer can also be avoided. Compatibility: IE9+, Firefox 3.6+, safari5.0+
Example:
Output text in 3 font sizes in the browser to demonstrate the function of rem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience rem</title>
<style>
<style>
html{font-size:16px;}
.div{font-size:30px;}
.p{font-size:1rem;}
.span{font-size:0.5rem;}
</style>
</style>
</head>
<body>
<div class="div">The text size in the div tag is 30px
<p class="p">The text size in the P tag is 1rem
<span class="span">The text size in the span tag is 0.5rem</span>
</p>
</div>
</body>
</html>
browser display content
3.% percentage
Broadly speaking, it is relative to the parent element, but it is not very accurate
1) For ordinary positioning elements, it is the parent element we understand
2) For position: absolute; elements are relative to the positioned parent element
3) For position: fixed; elements are relative to ViewPort (visual window)
4. vw and vh
Vw and vh are viewport units. What is a viewport? As the name suggests, a viewport is a visible window.
There are two situations:
1. On the PC side, the viewport refers to the visible area of the browser on the PC side;
2. On the mobile terminal, there are three types of viewports on the mobile terminal: Layout Viewport (layout viewport), Visual Viewport (visual viewport), Ideal Viewport (ideal viewport); the differences between these three viewports will not be described here. Refers to Layout Viewport (layout viewport).
Vw and vh are based on the size of your browser window, and are not affected by the resolution of the display. Isn’t it amazing? This means that we don’t need to worry about the adaptive resolution of so many different computers today.
For viewport (viewpoint) width or height. 1vw is equal to 1% of the viewport width, and 1vh is equal to 1% of the viewport height. Compatibility: All browsers of higher versions are supported.
eg: The viewport is divided into 100 units of vw, the screen width is 375px, 1vw=3.75px; the viewport is divided into 100 units of vh, the screen height is 1200px, 1vh=12px;
The difference between vw, vh and % percentage:
(1) % is the ratio set relative to the size of the parent element, and vw and vh are determined by the size of the viewport.
(2) The advantage of vw and vh is that it can directly obtain the height, but it is impossible to obtain the height of the visible area correctly with % without setting the body height, so this is a very good advantage.
(3) For the problem of full horizontal and vertical screen backgrounds, using % in ipx may have a safe blank area
(4) vh is the size calculated relative to the height of the viewport. It needs to consider the full screen, and the height of the viewport is too large
(5) Both vw and vh can be used in essence, do not mix the width and height of a box with vw and vh
Note: The viewport unit is different from the % unit. The viewport unit depends on the size of the viewport and is defined according to the percentage of the viewport size; while the % unit depends on the ancestor element of the element.
Example:
Draw a rectangular pink rectangle in the browser, the width is the width of the browser, and the height is half the height of the browser.
Changing the size of the browser window (not zooming in and out of the page), the ratio of the width and height of the pink rectangle to the width and height of the browser remains unchanged.
Demonstrate what vw and vh do.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience vw and vh</title>
<style>
.box {
width: 100vw;
height: 50vh;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
browser display content
5.vmin vmax
vmin is the smaller value of the current vw and vh, and vmax is the larger value of the current vw and vh.
When doing mobile page development, if you use vw and wh to set the font size (for example, 5vw), the font size displayed in the vertical and horizontal screens is different.
Since vmin and vmax are currently smaller vw and vh and currently larger vw and vh. Here you can use vmin and vmax. Make the text size consistent in both horizontal and vertical screens.
example
Keep changing the size of the browser, and you will see that the size of the pink rectangle keeps changing. Demonstrate the role of vmin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experience vmin</title>
<style>
.box {
width: 50vmin;
height: 100vmin;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
browser display content
vmax is similar to vmin, try it yourself, so I won’t go into details here.
If you want this element to always cover the visible area of the entire viewport, change the values of height and width to 100vmax
.box {
height: 100vmax;
width: 100vmax;
}
6.vm
CSS3 new units, relative to the viewport's width or height, whichever is smaller.
The smallest one is evenly divided into 100 units of vm, for example: browser height 900px, width 1200px, take the smallest browser height, 1 vm = 900px/100 = 9 px.
Due to the poor compatibility of vm now, it will not be shown here.
7.ch
Width of number 0
8. ex
Depends on the height of the small x of the English letter
4) Summary
There are 8 length units in css, namely px, em, pt, ex, pc, in, mm, cm;
px, em and rem are mostly used, em and rem are used to adapt to different screens, and will eventually be converted to px for layout, so there is no limit to the accuracy
1) px is generally used in web page layout.
2) Generally speaking, percentages are generally used more in adaptive web page layouts than parent elements.
3) viewport: Visual window, which is the browser.
calc() uses common math rules, but also provides smarter functions:
Use the four arithmetic operations "+", "-", "" and "/";
Percentage, px, em, rem and other units can be used;
Various units can be mixed for calculation;
When there are "+" and "-" in the expression, there must be spaces before and after it, such as "widht: calc(12%+5em)" without spaces is wrong;
When there are "" and "/" in the expression, there can be no spaces before and after them, but it is recommended to leave spaces.
For example: set the height of the div element to the height of the current window - 100px
div{
height: calc(100vh - 100px);
}
It is generally used to set the width and height of the fluid layout. Of course, you can use calc() to set dynamic values for the border, margin, padding, font-size, and width attributes of the element.
The compatibility of calc() is as follows:
In actual use, you also need to add the browser prefix:
.elm {
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();
}
4) Chrome enforces a minimum font size of 12. Even if it is set to 10px, it will eventually be displayed as 12px. When the font-size of html is set to 10px, the calculation of child node rem is still based on 12px, so many articles on the Internet mentioned that It is not so desirable to set the font-size of html to 10 for convenient calculation.
5) The premise of using vw, vh, vmin, and vmax is on the premise of the mobile terminal, that is, first declare the scaling ratio of each.