You may not know the 7 CSS units

If you are a front-end development engineer, General PX and EM use frequency is relatively high. But today the focus of this article is to introduce some of the units we use very little or even have heard.

One, relive em

TEST-01 (12px * 1.5 = 18px)

TEST-02 (18px * 1.5 = 27PX)

TEST-03 (27PX * 1.5 = 41px)

Because Font-size is inherited, the darker the number of layers is, the larger the font.

Second, REM

Although the above use of EM may be used in development, we sometimes want to have a benchmark to expand. When confronted with this requirement, we can use the REM unit, "R" in rem to represent "root", which means that the font size of the current element is set to the root element, and in most cases we will set it on the HTML element.

TEST-01 (12px * 1.5 = 18px)

TEST-02 (12px * 1.5 = 18px)

TEST-03 (12px * 1.5 = 18px)

Of course, REM units are not only used in fonts, but also in CSS grid systems.

iii. VH and VW

In a responsive layout, we often use percentages to lay out, but the percentage of CSS does not always solve the best solution for each problem, and the width of the CSS is relative to the width of the parent element closest to it. If you want to use the width and height of the viewport rather than the width of the parent element, you can use the VH and VW units. 1VH = Viewportheight * 1/100; 1VW = Viewportwidth * 1/100; The use of VH, VW can ensure that the elements of the width and height to adapt to different devices.

iv. vmin and Vmax

VW and VH correspond to the width and height of viewport, while Vmin and Vmax correspond to the minimum and maximum values in width, height, for example, if the width/height of the browser is set to 1000px/600px,

1vmin = 600 * 1/100;

1vmax = 1000 * 1/100;

Let's take a look at a few examples:

4.1 A square element always touches the edges of at least two screens

Fdasjfdlas

4.2 Overlay Full Screen

Fdasjfdlas

V, ex and CH

EX, CH units are similar to EM and rem in that they all depend on font-size, but ex and CH are also dependent on font-family, based on font-specific. Reference to the Consortium specification:

ex unit Equal to the used X-height E font. [Css3-fonts] The x-height is and so called because it are often equal to the height of the lowercase "x". However, an '

CH Unit Equal to the used advance measure of the ' 0 ' (ZERO, u+0030) glyph found in the ' font used to render it   .

Use a diagram to explain the meaning of these two units:

These two units have many uses, most of which are micro-adjustments for printing. For example, the SUP and sub elements display superscript and subscript respectively, but we can use position and bottom simulations:

Aabbccxxddeeff