About font size settings in CSS em rem etc.

Source: Internet
Author: User

Common units

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).

    • absolute units are, in most cases, fixed values relative to certain actual measures, that is, once they are set, they are not changed by the font size of other elements.
    • relative units do not have a fixed measure, but a relative value determined by the size of the parent element, whose dimensions change depending on the element to which it is associated.

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 .

What's the difference between them?

It is conceptually 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 <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.remAndem(or%)

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 width

vwis 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 am

When 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.