Common font units in CSS: differences between px, em, rem, and %, pxrem

Common font units in CSS: differences between px, em, rem, and %, pxrem

When I first came into contact with CSS, px was widely used and well understood. However, after a long time, I found some defects, especially in responsive development.

So when should so many units be used? Let's discuss it today.

First, let's roughly explain the meaning of these units:

1. px

The pixel unit is a fixed-size unit used for Screen media (that is, reading on the computer screen ). A pixel is equal to a point on the computer screen (the minimum split of your screen resolution ). Many web designers use pixel units in their web documents to produce a website where the pixels rendered by browsers are perfectly rendered.

One problem with pixel units is that it is not extended for visually impaired readers to adapt to mobile devices.

2. em

The em unit name is the relative length unit. Compared with the font size of the text in the current object, if the font size of the text in the current row is not set manually, the default font size of the browser is used more abroad;

The em unit has the following features:

1. The em value is not fixed;

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

When writing CSS, if you want to use em as the unit, 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 change it to em as the unit;

3. recalculate the em values of the enlarged fonts. Avoid repeated statement of font size.

We know that the default font height of any browser is 16 PX. All unadjusted browsers match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare Font-size = 62.5% in the body selector in css, which changes the em value to 16px * 62.5% = 10px, so that 12px = 1.2em, 10px = 1em, that is, you only need to divide your original px value by 10, and then change to em as the unit.

Em inherits the font size of the parent element, but when the font size of the parent element changes, it has to be recalculated again, which is not very convenient. Fortunately, rem solved this problem.

3. rem

Rem is a new unit of relative length added to CSS3. It is only relative to the root directory, that is, HTML elements.

Therefore, we only need to set the font size as the standard on the html Tag, And the font size in the document will take this as a reference.

Html {font-size: 62.5%;/* 10 bytes 16 = 62.5% */}

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

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

Compatibility: Mainstream versions of IE9 +, Firefox, Chrome, Safari, and Opera are supported. To be compatible with browsers that do not support rem, We need to write the corresponding px value before rem, in this way, unsupported browsers can be elegantly downgraded.

4,%

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

Generally,1 em = 16 px = 100%

Personal summary:In the general PC network page creation process, px and em are usually used, and rem is generally used on mobile terminals.

Sorry for the bad summary!