Mobile development: Several CSS unit attributes that you may not know ., Css Unit

Mobile development: Several CSS unit attributes that you may not know ., Css Unit

1. rem

The "em" unit is commonly used in development. It indicates to set the size of the current element based on the unit size of the parent element of the current element; in "rem", "r" represents "root", which indicates to set the unit size of the current element based on the unit size of the root (that is, "html") element, therefore, no matter whether the current element is any subnode, once the unit size is set to "rem", the size of this element is based on the root element unit, both "em" and "rem" Here are inherited.

2. vw and VL (mobile development is my favorite unit attribute, which is also the focus of this introduction)

In traditional responsive development, we often use percentages for layout, but this is not the best solution. For example, you cannot set the percentage with the height of the body.

The full name of "vw" is "viewport width", that is, the width of the window; "Vl" is "viewport height", that is, the height of the window.

1vw = viewportWidth * 1/100; 1vl = viewportHeight * 1/100;

Therefore, the element uses "vw" and "Vl" as the width and height units, which ensures that the elements are compatible with different devices.

3. vmin and vmax

"Vmin" refers to the one with the smallest width and height of "viewport. (That is, if the current element unit is set to "vmin", the browser will determine the width and height, and then inherit small values)

Similarly, "vmax" inherits the value that is larger than width and height. That is, the value that is inherited when the width and height are greater.

Assume that the browser width is 1300px and the height is 960px;

50 vmin = 960*(50/100 );
50 vmax = 1300*(50/100 );

4. ex and ch

These two units are rarely used in our daily development. We will not elaborate on them here. The following figure explains the meaning of these two units. If you are interested, you can check the information yourself.