px
px is the abbreviation of pixel, the relative length unit, the basic unit commonly used in web design. Pixels are relative to the monitor screen resolution
em
em is a relative length unit. The font size relative to the text in the current object (the reference is the font-size of the parent element)
If the font size of the current parent element is not set, it is relative to the browser’s default font size
Features:
1. The value of em is not fixed;
2. em inherits the font size of the parent element
rem
rem is a new relative unit in CSS3, and rem is a unit of length calculated relative to the font size (font-size) of the HTML root element.
If you do not set the font size of html, it will use the browser default font size, usually 16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */ body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */ /* A basic font size of 62.5% is defined in the root element (that is, 10px. Setting this value is mainly convenient for calculation. If it is not set, it will be based on "16px")*/
The advantage is that you only need to set the size of the root directory to adjust the proportion of the entire page.
rem compatibility: rem is already supported in all browsers except IE8 and earlier
The difference between em and rem:…
The post Difference between Css Units px, rem, em, vw, vh first appeared on Lenix Blog .
This article is reprinted from https://blog.p2hp.com/archives/9475
This site is for inclusion only, and the copyright belongs to the original author.