You might not notice. CSS Units

Original: You may not notice the CSS unit

The Chase

The units in CSS we often use px ,, pt , em 百分比 , PX and PT do not have to say more

Em

EM is the relative unit, the reference is the parent element font-size , has the inheritance characteristic

If the font size is 16px (the browser's default value), then1em = 16px

The use of conversion is very complex, especially with PX corresponding, we summed up the experience

Body {
font-size:62.5%;
}

And then 1em = 10px in the layout and so on when the use of good conversion of a lot

Percentage

Percentages are also very common usage, seemingly simple in fact some beginners may not notice the knowledge

Relative to WHO

The first thing to be clear is the percentage is relative to who, broadly speaking is the parent element, but not very accurate

1. For the common positioning element is the parent element that we understand
   
2. For position: absolute; the element that is relative to the anchored parent element (offset parent)
   
3. For position: fixed; the element is relative to ViewPort

Viewport: Visual window, that is, the window of the browser is so large

Accident

1. Padding, margin If you set a percentage, you will find the same percentage of the width of the parent element as expected, but with the width of the * * percentage instead of the imaginary height.
   
2. Descendant elements inherit a percentage- calculated value instead of the original percentage, which line-height often encounters pits, as well as a question asking you line-height to set the 120% 1.2 difference between

CSS3 opens New Age REM

EM is a good unit, but one problem is that it can be confusing because EM relies on the font size of the parent element, and the font size of the parent element of each element is not necessarily the same, resulting in large uncertainties on the layout

remFont size of the root element

rem relative html to the root element (Web page), so it's a lot safer to use.

HTML {font-size:62.5%;/10÷16x100% = 62.5%/}
body {font-size:1.4rem;/1.4x10px = 14px /}
h1 {Font-size:2.4rem;/2.4x10px = 24px/}

ie9+ and modern browsers are already supported.

VW and VH

• vwViewport width, * * 1VW * * equals viewport width of 1%
  
• vhViewport height, * * 1VH * * equals viewport high of 1%

VW and VH will change automatically with viewport changes, no longer have JS control full screen god Horse

Even some people with a lunatic font size are controlled by VW and VH to achieve the effect of font and viewport size synchronization

Both ie10+ and modern browsers support these two units

Vmin and Vmax

These two units are for both VW and VH

• vminValues in VW and VH compared to small * * *
  
• vmaxValues in VW and VH compared to * * BIG * *

These two properties also change with viewport

Both ie10+ and modern browsers have supported Vmin

WebKit Browser does not support Vmax before, it is now supported, all modern browsers have been supported, but IE * * * * * does not support Vmax

CH and EX

These two units are based on font-family the relative units of the current * * *

• ch0the width of the character
  
• exxheight of lowercase characters

The font-family values of these two units change when they change, and the styles of different fonts behave differently.

ie9+ and modern browsers are already supported

Browser compatibility

Write the time introduced some, the great God wrote the test page can help us to see intuitively

Http://s.codepen.io/chriscoyier/fullgrid/CiwFD?type=embed&safe=true

Reference

7 CSS Units might not Know about

Length units for CSS

7 CSS units you may not know

You might not notice. CSS Units