The difference between PX and Em,rem in CSS units

CSS units are divided into relative length units, absolute length units.

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M00/05/AC/wKiom1mpJyCRZ56XAABK9hh9xdg818.jpg-wh_500x0-wm_ 3-wmp_4-s_1725473713.jpg "title=" 1.jpg "alt=" Wkiom1mpjycrz56xaabk9hh9xdg818.jpg-wh_50 "/>

Today we mainly explain the difference and usage of REM, EM, px, and other common units.

PX (absolute length unit)

I believe that the front-end PX This unit is not unfamiliar to everyone, PX this unit, compatibility can be said to be quite possible, everyone's understanding of PX is certainly not a big problem.

EM (relative length units)

use: 1, the browser's default font is 16PX, then 1em=16px, and so on to calculate 12px=0.75em,10px=0.625em,2em=32px;

2, such use is very complex, it is very difficult to correspond with PX, also lead to writing, use, visual complexity (0.75EM, 0.625em are all decimal points);

3, in order to simplify the conversion of font-size, we write the code in the body

body {font-size:62.5%; }/* Formula 16px*62.5%=10px */

In this way the page 1em=10px,1.2em=12px,1.4em=14px,1.6em=16px, make the visual, use, writing have been greatly helped.

Examples are as follows:

<div class= "font1" style= ' font-size:1.6em ' > I'm 1.6em</div>

The effect is:

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M01/05/AC/wKiom1mpJzDy4erUAABKKD5Shio068.png-wh_500x0-wm_ 3-wmp_4-s_3371604369.png "title=" 2.png "alt=" Wkiom1mpjzdy4eruaabkkd5shio068.png-wh_50 "/>

Disadvantages:

1, the value of EM is not fixed;

2, EM will inherit the font size of the parent element (the reference is the parent element's font-size;);

3. All fonts in EM are relative to the size of the parent element, so if a FONT-SIZE:1.2EM element is set in another FONT-SIZE:1.2EM element, and this element is set in another font-size : In the 1.2EM element, the result of the final calculation is 1.2x1.2x1.2=1.728em

For example:

<div class= "Big" >
I'm a big font.
<div class= "Small" > I am a small font </div>
</div>

Style is

<style>

. Big{font-size:1.2em}
. Small{font-size:1.2em}
</style>

However, the font size of the running result small is: 1.2em*1.2em=1.44em

650) this.width=650; "Src=" https://s3.51cto.com/wyfs02/M01/A4/5E/wKioL1mpJzDRRhPXAABaz50KSko696.png-wh_500x0-wm_ 3-wmp_4-s_2931024816.png "title=" 3.png "alt=" Wkiol1mpjzdrrhpxaabaz50ksko696.png-wh_50 "/>

* Width height is also the same

REM (relative length units)

use: 1, the browser's default font is 16PX, then 1rem=16px, and so on to calculate 12px=0.75rem,10px=0.625rem,2rem=32px;

2, such use is very complex, it is very difficult to correspond with PX, also lead to writing, use, visual complexity (0.75rem, 0.625em are all decimal points);

3, in order to simplify the conversion of font-size, we add font-size:62.5% in the root element html;

HTML {font-size:62.5%; }/* Formula 16px*62.5%=10px */

So the 1rem=10px,1.2rem=12px,1.4rem=14px,1.6rem=16px of the page, so that the visual, use, writing have been greatly helpful;

Examples are as follows:

<div class= "font1" style= ' Font-size:1.6rem ' > I'm 1.6rem=16px</div>

The effect is:

650) this.width=650; "Src=" https://s5.51cto.com/wyfs02/M01/05/AD/wKiom1mpJ1rwyiZmAABS6GuTt0Q253.png-wh_500x0-wm_ 3-wmp_4-s_2240265030.png "title=" 4.png "alt=" Wkiom1mpj1rwyizmaabs6gutt0q253.png-wh_50 "/>

Characteristics:

1, REM unit is a combination of relative size and absolute size of the advantages of a

2, unlike EM, REM is always relative to the root element (such as: root{}), rather than using cascading methods to calculate dimensions like em. This relative unit is simpler to use.

3, REM support IE9 and above, meaning relative to the root element of HTML (Web page), not like EM, depending on the parent element font size, and cause confusion. It's a lot safer to use.

For example:

<div class= "Big" >
I am 14px=1.4rem<div class= "small" > I am 12px=1.2rem</div>
</div>

Styles are:

<style>
HTML {font-size:10px; }/* Formula 16px*62.5%=10px */
. Big{font-size:1.4rem}
. Small{font-size:1.2rem}
</style>

Operation Result:

650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M01/A4/5E/wKioL1mpJ1GChYLYAACdpb6xLMM519.png-wh_500x0-wm_ 3-wmp_4-s_2645403851.png "title=" 5.png "alt=" Wkiol1mpj1gchylyaacdpb6xlmm519.png-wh_50 "/>

Attention:

• Notable browser support issues: REM units are not supported in Ie8,safari 4 or IOS 3.2.

• If your user base is using the latest version of the browser, it is recommended to use REM, if you want to consider compatibility, then use PX, or both.

This is my whole to px, EM, rem Summary of the difference, I hope to have help, I will continue to improve the update of my knowledge Base, Hee *_*

This article is from the "front-end development" blog, so be sure to keep this source http://smalljiayi.blog.51cto.com/13254596/1962006

The difference between PX and em,rem in a CSS unit