CSS Unit introduction em ex ch REM VW VH vm cm mm in pt pc px

The length unit mainly has the following kinds of EM ex ch REM VW VH vm cm mm in pt pc px%, presumably can be divided into several "absolute units" and "relative units" and "percent units".

Absolute unit: px in cm mm

Relative unit: EM rem pt PC EX CH

Percent unit: VW VH VM%

The following mainly say a few commonly used units

PX: Absolute Unit, page by exact pixel display

EM: Relative units, the reference point is the size of the parent's font, if you define the font-size by itself (the browser default font is 16PX), the entire page 1em is not a fixed value.

REM: relative unit, can be understood as "root em", relative to the root node HTML font size to calculate, CSS3 new attributes, chrome/firefox/ie9+ support.

REM on mobile app can refer to Taobao page http://m.taobao.com

Vw:viewpoint width, window width, 1vw equals 1% of the window width.
Vh:viewpoint height, window height, 1VH equals 1% of the window height.
The smaller of the VMIN:VW and VH.
The larger of the VMAX:VW and VH.

VW, VH, VMIN, vmax:ie9+ partial support, Chrome/firefox/safari/opera support, iOS Safari 8+ support, Android browser4.4+ support, Chrome for ANDROID39 support

Other units include:
%: Percent
In: Inch
CM: cm
MM: MM
Pt:point, about 1/72 inches

Pc:pica, about 6PT,1/6 inches

Ex: the height of the x of the font for the current effect, calculated as 0.5em without determining the x height (IE11 and below are not supported, Firefox/chrome/safari/opera/ios safari/android browser4.4+ Equal required attribute plus prefix)

CH: Based on the "0" character in the font used by the node, 0.5em (Ie10+,chrome31+,safair7.1+,opera26+,ios Safari 7.1+,android browser4.4+ support) is not found

Detailed description of several units

Em
The advantage of using EM is that in a responsive design, using the EM feature, you can modify the width of the entire page by changing the size of the body by one value.
Em front already said the browser default font height is 16px, so 1em=16px. So 12px=0.75em, 10px=0.625em. It's not easy to write. We usually convert units, in order to simplify what we need to declare in the body selector in CSS
font-size=62.5% This changes the EM value to 16px*62.5%=10px. This 1em=10px,1.2em=12px helps us with the conversion.

Problems encountered with EM:

Cases:

body{font-size:62.5%;margin:20px; color: #0072e4; font-weight:bold;}   . Div1{font-size:1.2em;}   . Div1-pgae1{font-size:1.2em;}   . Div1-page2{font-size:1.2em;}

<div class= "Div1" >      <p>div effects </p>      <div class= "DIV1-PGAE1" >          <p>page1 Effects </p>          <div class= "Div1-page2" >              page2 effects          </div>      </div>  </div>

The effects of viewing in the browser are as follows:

See this effect will find the following font is not the same size, this is because EM has inherited the parent element size, in DIV1 inherit the body size 16px * 62.5% * 1.2=12px, and div1-page1 inherit div1 size, should be 1.2 * 1.2 = 1.44 so the font size shown in Div1-page1 is actually 14.4px. In turn

Rem

REM is also a relative unit, but unlike EM, he inherits from the root node and does not inherit the parent element, so there is no problem with em appearing above. REM for responsive design modifies the width of the entire page by changing the font size of the root element html by one value

For example, the root element set the font size 10px, a container in the body want to use 14PX, the container set 1.4rem, the title wants 20px, then set 2rem. If you use EM, then the title will be counted, 20/14=1.4em, if used 2em, will become 28px. So the benefits of REM come out.

Here's a two percent unit% and VW

% units We will often use, very familiar, not much to say, but the% unit has a feature is that he is also inherited from the parent element size of the unit

VW calculates the width of the inspection and does not inherit from the parent element size. At the same time, his benefits are reflected.

Original address: http://www.ithao123.cn/content-7269217.html