The difference between PX EM rem

Catalog

px

em

Rem

---

 

px

Relative length unit , Relative to the screen resolution of the monitor

There is a browser incompatibility issue

em

Relative length unit , Equivalent to the font size of the text in the current object

em The value is not fixed ,em Will inherit the size of the parent element

It is easy to cause confusion in font setting

If his parent set font-size by 10px, that 1em Equal to paternal 10px,2em Equal to paternal 20px, And so on

We don't usually use em, If the parent element is deleted , Then he will look for his father -> Parent , Therefore, it is particularly easy to cause confusion in font settings

Rem

Relative length unit , Relative to the root node html Font size to calculate , The default font height of any browser is 16px

If html The root node sets the font font-size by 100px. be 1em=100px. 2em=200px. It's not about the parent font

Browser compatibility is better