The distinction between CSS font units and the implementation of font-response

Here is an explanation of the difference between the CSS font units and the implementation of the font response style. The content is very good, now share to everyone, but also for everyone to make a reference.

Problem Scenario:

How can I set the font size in different window sizes and the readability of different mobile devices during the implementation of responsive layouts?

What you need to know is:

Conversion relationship between 1.PX,EM,PT
1em = 16px
1px = 1/16 em = 0.0625em

The following are relatively less//////
1em = 12pt
1px = 3/4 pt = 0.75pt
1pt = 1/12 em 0.0833em
1pt = 4/3 px = 1.3333px

2. The default font for any browser is 16px. The default size for all unmodified browsers is 1em=16px

3.chrome force the minimum font to 12PX, even if set to 10px, will eventually appear as 12px. This explains why sometimes the font size in IE or mozllia and Chrome has an initial entry

What is the difference between 4.px,em,rem vw,vh,vmin?

Px:

Relative units. Relative to the screen resolution. That's why the larger the resolution, the smaller the font. What about the advantages and disadvantages of PX?

Advantages: relatively stable and accurate.

Disadvantage: If the page is scaled, it affects the readability of the text. You can solve this problem by using EM as a font unit.

Em:

Relative units. Scales the font size against a datum value, which is a relative value, not a specific value. The base value depends on the Font-size set by the parent element. If the parent element is not set font-size, search up until the root node.

Advantages: Compensates for the lack of PX

Cons: Too dependent on parent nodes, prone to duplicate font-size declarations.

Rem:

Relative units. The font size relative to the root node HTML.

Cons: Avoid em dependency parent element font size

Pros: Only one reference system, root node font size

<span style= "font-size:16px" >html{font-size:100%}    //Response font size relative to the root node    @media (min-width:640px) {body {Font-size:1rem;} }    @media (min-width:960px) {body {font-size:1.2rem;}}    @media (min-width:1100px) {body {font-size:1.5rem;}}    </SPAN>

5. Why is the root node font size set to 62.5%?

The above describes the browser default font size of 16px, if you want to set the font size under different page size is 12, 14, 18px How to do?

Do you have to use 12/16 Rem,14/16rem,18/16rem this way to calculate the relative size of the font?

A simpler way to set the font size at the root node is 10px, so you can write 1.2rem,1.4rem,1.8rem directly in media. If the root node is set to 10px, the default font size relative to the browser is FONT-SIZE:10/16% (font-size:62.5%).

<span style= "font-size:16px" >html{font-size:10px}    //Response font size relative to the root node    @media (min-width:640px) {body {font-size:1m=1.2 rem;font-size:12px;  /Some browsers do not support rem/}}    @media (min-width:960px)  {body {font-size:1.4 rem; font-size:14px;/* Some browsers do not support REM, Need to use PX declaration font-size*/}}    @media (min-width:1100px) {body {font-size:1.8 rem; font-size:18px;/* ditto *}}    </ Span>

<span style= "font-size:16px" >html{font-size:16px}    //Response font size relative to the root node    @media (min-width:640px) {body {FONT-SIZE:12/16 rem;font-size:12px;  /Some browsers do not support REM and need to use PX declaration font-size/}}    @media (min-width:960px)  {body {font-size:14/16 rem; font-size:14px;/* Some browsers do not support REM and need to use PX declaration font-size*/}}    @media (min-width:1100px) {body {font-size:18/16 rem; font-size:18px;/* Ditto */ }}    </SPAN>

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!