CSS3 unit, css3

CSS3 unit, css3

Em

The front-end should be familiar with em. It is not a rare unit but a relative unit. The reference object is the font-size of the parent element and has the inheritance characteristics. If the font size is 16px (the default value of the browser), 1em = 16px.

However, this method is complex and difficult to match with px. Therefore, the predecessors of front-end development summarize an experience.

body {font-size: 62.5%;}

In this case, when 1em = 10px is used in the layout and so on, it will be much easier.
Percentage

The percentage is generally more accurate than the parent element.

1. for common positioning elements, they are the parent elements we understand. 2. For position: absolute;, the elements are relative to the located parent element (offset parent). 3. For position: fixed; the element is relative to the ViewPort

Viewport: visible window, that is, the size of the browser window.

Exceptions

1. When padding and margin are used, the actual percentage is different from the expected percentage. (One of the solutions to this problem is that we can use the calc () attribute of css3. For details, please continue to read it. I will explain it at the end of the article .) 2. Some situations of line-height percentage, usually the result is the value after percentage calculation. (For more information, see ...)

 

Rem

Rem supports IE9 and later, which means that compared with the root element html (webpage), it does not depend on the font size of the parent element as em, resulting in confusion. It is much safer to use. Html {font-size: 62.5%;/** 10 bytes 16 × 100% = 62.5% 1rem = 10px **/} body {font-size: 1.4rem; /** 1.4 × 10px = 14px **/} h1 {font-size: 2.4rem;/** 2.4 × 10px = 24px **/} the entire webpage will be unified! No confusion!

 

VL and vw

Both IE10 + and modern browsers support these two units.

Vw Viewport width. 1 vw is equal to 1% of the viewport width.

The changes of the vw and SLS will automatically change with the changes of the viewport, And the JavaScript code is no longer used to control the full screen.

Even some people are crazy about the font size, which is controlled by vw and VL to synchronize the font and viewport size.

Vmin and vmax

Both IE10 and modern browsers support vmin.

The webkit browser does not support vmax before. The new version is supported. All modern browsers are supported, but IE does not support vmax.

Smaller vmin vw values: larger vmax vw values

 

These two attributes will also change with the viewport.
Ch and ex

Both IE9 + and modern browsers are supported. The two units are based on the relative unit of the current font-family.

Width of ch 0 x height of lowercase character x

When the font-family is changed, the values of these two units also change. Different fonts have different styles.