Analysis of the difference between PX, EM, REM and%

So when is it that so many units are suitable? Let's talk about it today.

First of all, explain the meaning of these units:

1, px

PX unit names are pixels and pixels are fixed-sized units for screen media (that is, read on a computer screen). A pixel is equal to a point on the computer screen (the smallest segment of your screen resolution). Many web designers use pixel units in a Web document to render a Web site perfectly rendered by producing browser-rendered pixels.

One problem with pixel units is that it does not extend for visually impaired readers to accommodate mobile devices.

2, EM

The EM unit name is the relative length unit. Relative to the font size of the text within the current object, such as the font size of the current text within the line is not artificially set, compared to the browser's default font size, foreign use more;

EM units have the following characteristics

1. The value of EM is not fixed;

2. Em inherits the font size of the parent element.

When we write CSS, if we want to use EM as the unit, we need to pay attention to the following points:

1. Declare font-size=62.5% in the body selector;

2. Divide your original PX value by 10 and then replace it with EM as the unit;

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

We know that the default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.

EM is the font size that inherits the parent element, but when the parent element's font size changes, it's not convenient, but the REM solves the problem.

3. rem

REM is a new relative length unit of CSS3, only relative to the root directory, which is the HTML element

So as long as we set the font size to the standard on the HTML tag, the font size in the document will be referenced

html{font-size:62.5%;/* 10÷16=62.5% */}

Body{font-size:12px;font-size:1.2rem;/* 12÷10=1.2 */}

P{font-size:14px;font-size:1.4rem;}

Compatibility: Ie9+,firefox, Chrome, Safari, Opera Mainstream versions are supported, in order to be compatible with non-REM browser, we need to write the corresponding PX value in front of REM, so that the unsupported browser can gracefully downgrade.

4,%

The percentage units are more like "em" units, except for some fundamental differences. First, the current font size is equal to 100% (for example, pt = 100%). When using percent units, your text remains fully scalable and accessible on mobile devices.

Generally,1 em = px = 100%

px, EM, REM, and% differences in the analysis