Home > Developer > Web Develop
There are many different ways to set the size of a font in CSS. In general, these units are divided into two main categories: absolute units (absolute) and relative units (relative).
Here is a simple collation of these units:
| Unit | type | Description |
|---|---|---|
| Px | Absolute | 1 x viewport pixels |
| Pt | Absolute | 1pt = 1/72 inch |
| Pc | Absolute | 1pc = 12pt |
| % | Relative | The font size relative to the parent element |
| Em | Relative | The font size relative to the parent element |
| Rem | Relative | (that is, root em) font size relative to HTML tags |
| Keyword | Relative | Xx-small, X-small, small, medium, large, X-large, Xx-large |
| vw | Relative | Equivalent to 1/100 of the viewport width |
| Vh | Relative | Equivalent to 1/100 of the viewport height |
| Vmin | Relative | Equivalent to a relatively small 1/100 of the length of the viewport height and width |
| Vmax | Relative | Equivalent to the viewport high width medium length of relatively large 1/100 |
Here the main focus of these units:,,, px pt % em , rem and vw .
It is conceptually difficult to understand the differences between these units, so here are some examples to illustrate.
Example 1. Default settingsWhen you do not set the font size, HTML provides a default size setting. The default font size in most browsers and <body> tags is 100% , no concept? Look at this equation:
100% = 1em = 1rem = 16px = 12pt
Still don't understand? Let's put it another way, for example, if you give a font size to another setting, the font size is the same in the two that you see on the screen, and the <p> 100% font sizes that are set in <p> 16px <p> several different units are listed as large as you can see:
The change in font size can clearly see the difference between absolute units and relative units. If set to html { font-size: 200% } , it will affect all use relative units <p> . Effects such as:
This is the relative unit of the main advantage, with the help of relative units of this feature can be designed to create a real responsive page, and all you have to do is modify the font size.
Example 3.remem%em(or % ) You need to calculate the dimensions from the parent element's font size:
html { font-size : 100% /* =16px */}body { Font-size : 2EM ; /* =32px */} p { Font-size : 1em ; /* =32px */ /* font-size:0.5em; =16px */}
Because is the child element, and <p> <body> <body> is the child element, so <p> in the em and % will be twice times before.
When you add units to an element em , you should take into account the font size of all parent elements. As you can see, it's easy to make people confused.
Use rem can be a good solution to this problem. remyou only need to calculate the font size without having to consider the parent element. As shown in the following code:
{ font-size:/**/}{ font-size: 2rem /* *} { font-size: 1rem/* */}
Use allows rem you to have and em /or % the same scaling capabilities, but you don't have to consider those complex nesting relationships.
Example 4. Viewport widthvwis a newly proposed unit in CSS3, which calculates the font size by viewport width. In this way, you can design more flexible responsive fonts.
Although this unit looks great for responsive design, I'm not very keen on it personally. In vw the use of the process I do not have a good control of the size of the font, either too big or too small.
The way I amWhen I am writing this article, I use it only px as a unit. Because most browsers now allow users to zoom in on a page, there is no accessibility issue.
However, I have found this way of limiting power. Although my font size looks fine on a small-to-medium screen, it's better to be optimized on a big screen. Although users can set their own magnified properties, we hope to minimize the user's work.
My solution is to use and rem use px as an alternate unit.
{ font-size: 62.5%/* */} { font-size: 16PX; font-size: 1.6rem; /* */} { font-size: 32px; Font-size: 3.2rem;}
Writing like this allows me to zoom in on my font size proportionally:
{ html { font-size: 100%; } }
This scenario is used px as a fallback unit because rem IE8 and the following versions are not supported. One problem with this scenario is that, like the above, changing the base font size does not work for the alternate font size. However, I don't see how big the problem is because the ability to match large device sizes is just for icing on the cake, not a core feature.
About font size settings in CSS em rem etc.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
