To illustrate the font size settings in CSS

Common units

You can set the size of a font in many different ways in CSS. In general, these units are divided into two broad categories: absolute units (absolute) and relative units (relative).

Absolute units are in most cases fixed values relative to some actual metrics, meaning that once they are set, they are not changed by the font size of other elements.

Relative units do not have a fixed measure, but rather a relative value determined by the size of the parent element, whose dimensions change depending on the element in which it is related.

The following is a simple collation of these units:

This is mainly concerned with the following units: PX, PT,%, EM, REM and VW.

What's the difference between them?

Conceptually it is difficult to understand the differences between these units, so here are some examples to illustrate.

Example 1. Default settings

When you do not set the font size, HTML provides a default size setting. The default font size in most browsers and labels is 100%, no concept? Look at this equation:

CSS code copy content to clipboard

100% = 1em = 1rem = 16px = 12pt

Or do you not understand? Let's put it another way, for example, you give a

Set the font size to 100% and give the other

Set to 16PX, see these two on the screen

The font size in is the same, the following figure lists the font sizes that are set in several different units, and can be seen as large:

Example 2. Absolute and Relative

Changing the font size can be clearly seen in absolute units and relative units of the difference. If the setting is HTML {font-size:200%}, it will affect all the units that use the relative unit

。 The effect of the following figure:

This is the main advantage of relative units, with the relative units of this feature can design a real response page, and all you have to do is modify the font size

Example 3. REM with EM (or%)

EM (or%) needs to calculate the size by the font size of the parent element:

CSS code copy content to clipboard

HTML {

font-size:100%/* =16PX *

}

Body {

Font-size:2em; * =32PX * *

}

p {

Font-size:1em; * =32PX * *

/* FONT-SIZE:0.5EM; =16PX *

}

Because

is a child element, but a child element, so

In the EM and% will be twice times before.

When you add an EM unit to an element, you should take into account the font size of all the parent elements. As you can see, it's easy to make people confused.

Using REM can be a good solution to this problem. REM only needs to calculate the font size without having to consider the parent element. As shown in the following code:

CSS code copy content to clipboard

HTML {

font-size:100%/* =16PX *

}

Body {

Font-size:2rem; * =32PX * *

}

p {

Font-size:1rem; * =16PX * *

}

Using REM allows you to have the same scaling capabilities as em/%, but you don't have to consider the complex nesting relationships.

Example 4. Viewport width

VW is a newly proposed unit in the CSS3, which calculates the font size by viewport width. This allows you to design a more flexible response font.

While this unit looks great for responsive design, I'm not very keen on it personally. In the process of using VW I do not have a good control of the size of the font, either too large or too small.

The way I am

When I'm writing this article, I use PX only as a unit. Because most browsers now allow users to enlarge the page, there is no accessibility problem.

However, I have found a way to be a limited force. Although my font size looks fine on small and medium sized screens, it's better to be optimized on a large screen. Although users can set their own magnified properties, we want to minimize the user's work.

My solution is to use REM and use PX as the standby unit.

CSS code copy content to clipboard

HTML {

font-size:62.5%; /* Sets the base font to 10px for easier math * *

}

Body {

font-size:16px;

Font-size:1.6rem;

/* Sets the default sizing to make sure what is actually 10px * *

}

H1 {

font-size:32px;

Font-size:3.2rem;

}

Writing like this allows me to enlarge my font size proportionally:

CSS code copy content to clipboard

@media screen and (min-width:1280px) {

HTML {

font-size:100%;

}

}

This scheme uses PX as a standby unit because REM does not support IE8 and its version. The problem with this scheme is that it doesn't work with the alternate font size as it does when you change the underlying font size. However, I don't see how big a problem this is because the ability to match the size of a large device is just a matter of icing on the cake, not a core function.