This is the 13th day of my participation in the Genwen Challenge

Units are an important element in front-end development. There are at least 10 different units of measurement in our CSS, each with its own specific purpose. Using different units for different situations can make your web pages more flexible on various devices.

Absolute unit of length

Absolute units are digital representations of actual measurements in the physical world, independent of screen size or its resolution;

The most widely used absolute unit is the pixel (PX). A pixel is usually understood as a point on a screen. It is the smallest unit of measurement and is usually used as a benchmark for other units.

The w1 {height: 0.4 in; background:#FFCCCC; } .w2{ height: 10mm; background:#FFCC99; } .w3{ height: 1cm; background:#FFCC66; }. W4 {height: 37.8 px; background:#CCFF99; }. W5 {height: 2.4 PC; background:#CCFF66; }. W6 {height: 28.8 pt; background:#CCFF33; }Copy the code

Unit of relative length

There is no fixed value for relative units. Their values are relative to some other predefined values or characteristics. Because we can relate their width, height, font size, and so on to some other basic parameters, relative units make it easy to resize elements.

Relative font unit

The ex and ch

Ex is rarely used in development, and 1ex is equal to the height of the lowercase letter “x”, although the height of x may vary from font to font. 1 the ex = 0.5 em;

p {
  font-size: 2ex;
}
Copy the code

Ch, like ex, is defined as the width of the number 0. When the numeric 0 width cannot be determined, take half the em value as the ch value.

p {
  margin: 2ch;
}
Copy the code

em

  • The em unit value is equal to the font size of the base or parent element. Em represents the calculated value of the element’s font size attribute, if used for the font size attribute itself, relative to the font size of the parent element; For other attributes, font size relative to the element itself.

  • For example, if the font size of the parent element is 20px, the 1em value will be computed to 20px for all direct child elements.

  • The default font height for any browser is 16px. All untuned browsers fit: 1em=16px.

  • If Font size=62.5% is declared in the body selector, 1em=10px.

Question:

Em inherits the font size of its parent element or its own element, which can easily cause confusion in font size. As you can see from the following figure, border is 1em, but because of different font sizes, EM displays different font sizes.

The first layer < div class = "box" > < p > the second third layer < / span > < span > < / p > < / div >Copy the code
html{ 
    font-size: 40px;
}
div {
    border: 1em solid #FFCCCC;
}
p{
    font-size: 30px;
    border: 1em solid #FFCC66;
}
span{
    font-size:14px;
    border: 1em solid #CCFF33;
}
Copy the code

rem

Rem is the calculated value of the font-size attribute relative to the root element HTML;

As long as the HTML font size remains the same, the 1REM font size does not change, and REM only depends on the HTML font size

In the same example above, change em to REM, and you can see that the border is the same size.

html{ 
    font-size: 40px;
}
div {
    border: 1rem solid #FFCCCC;
}
p{
    font-size: 30px;
    border: 1rem solid #FFCC66;
}
span{
    font-size:14px;
    border: 1rem solid #CCFF33;
}
Copy the code

Unit of relative viewport

The vh and vw

The vH unit is the height of the viewport, and vH is equal to 1/100 of the viewport height, which is useful if we want to scale elements according to the height of the browser window.

For example, if the viewport height is 400px, 1vh=400/100=4px. If the viewport height is 800px, 1vh=800/100=8px.

Vw units are related to the width of the viewport. 1vw is equal to 1/100 of the width of the viewport.

For example, if the window width is 1200px, 1vw=1200/100=12px.

[Photo from Internet]

Vmin and vmax

Vmin takes 1/100 of the smaller value in the height or width of the viewport

For example, if the viewport size is 500 x 700, the value is 1vmin=500/100=5px. If the size is 1000 x 700, the value is 1vmin=700/100=7px.

Vmax, which takes 1/100 of the larger value in the viewport height or width,

For example, if the viewport size is 500 x 700, 1vmax=700/100=7px. If the size is 1000 x 700, 1vmax=1000/100=10px.

[Photo from Internet]

A Look at Length Units in the CSS

Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞