How to use the new length unit in css3

Usage: 1. em represents the font size relative to the text in the current object; 2. rem represents the font size relative to the root element; 3. ch represents the size of the number 0; 4. vh represents the percentage view The height of the window; 5. vw represents the width of the viewport in percentage; 6. ex represents the height of the lowercase x letter of the current font or 1/2 of 1em.

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the use of new length units in css3

The new length units in css3 are:

• em: relative to the text in the current object font size. Font size relative to the parent node

• rem: Font size relative to the root element . Application scenario: The layout is determined by text content.

• vh and vv: 1vh is equal to 1/100 of the viewport height ①, and 1vw is equal to 1/100 of the viewport width.

• vmin and vmax: Regarding the minimum or maximum value of the viewport height and width, vmin is equal to the minimum value of 1/100 of the viewport width and height. Application scenario: Make an element always visible on the screen.

• ch: the width of the number 0

• ex: the height of the lowercase x letter of the current font or 1/2 of 1em②. Application scenario: Superscript and subscript

ch -- width of character 0 (zero)

rem -- font- of the root element (html element) What does size

mean?

For example, if the font size of the root element html is 100px, then the rem settings of the elements below the root element are all 1rem = 100px.

The initial value of rem is 16px, which means that when the font-size of the root node is not set, 1rem = 16px

Remember, it is relative to the root element html. If the body is set, then It will not work

Remember: vw and vh are only relative to the browser's visible area, that is, window.innerHeight, window.innerWidth

vw -- the browser's visible area, 1vw is equal to 1% of the width of the browser's visible area

vh -- the browser's visible area, 1vh is equal to 1% of the height of the browser's visible area

vmin -- the smaller of vw and vh The one

vmax -- the larger one between vw and vh

For example, the browser width/height is set to 1000px/600px

Then,

2vmin = 600*2/100 = 12px
2vmax = 1000*2/100 = 20px

(Learning video sharing: css video tutorial)

The above is the detailed content of How to use the new length unit in css3. For more information, please follow other related articles on the PHP Chinese website!