The difference and usage of font units PX,PT,EM, REM, percentages in CSS

css px,pt,em, REM, percent difference and usage

px that is, the average domestic website uses more , The default size is 16px;

PT Printing Industry common units

em   relative units, relative units of parent element properties

rem   The advantages of combining relative positioning and absolute positioning, relative to the root element html html size is ok

conversion formula :

pt=px 3/4
multiples em= x16px

Note: 1em=16px . So 12px=0.75em,10px=0.625em.

Usage of 1.em

In the process of code rewriting, in order to simplify the conversion of font-size, declare font-size=62.5% in the body selector, which makes the EM value 16px*62.5%=10px, so 12px=1.2em,10px=1em, That means simply dividing your original PX value by 10 and then switching to EM as the unit. The steps are as follows:

1). font-size=62.5% is declared in the body selector;
2). Divide your original PX value by 10 and then replace it with EM as the unit;
At this time some of the word experience is surprisingly large, because the value of EM is not fixed, and will inherit the size of the parent element, such as

Body{font-size=62.5%;}  ①
Div{font-size:1.2em;}   ②
P{font-size:1.2em;}  ③  

Explanation: where P belongs to a subset of Div, ① settings make 12px=1.2em,10px=1em,px and em into 10 times-fold relations; so the ② setting makes the div font size 1.2em=12px;③ the size of p is relative to ② in the Div font, So the font size of P is 1.2*12px=14.4px; not 10 times times the relationship;
3). Recalculate the EM values of those magnified fonts. Avoid duplicate declaration of font size, that is, avoid the above mentioned, change ③ to P{font-size:1em;} Can.

2.rem usage of

P1 The size of the element and the P2 element is the same

tml{
font-size:62.5%;/ * 10÷16=62.5% * /     /*Key Code*/
}
Body{
font-size:1.2REM;/ * 12÷10=1.2 * /  <SPAN style="font-family:Microsoft Ya-Black, Song Body;">/* the two effects are the same*/</span>
}
#p1{
font-size: -px;

}

<Pre name="Code"class="HTML">#p2{
font-size: -REM;
}</Pre>
<Pre></Pre>
<Pre></Pre>

The difference and usage of font units PX,PT,EM, REM, percentages in CSS