A study of Font-size

Organize the information on the Internet

Font fonts, what do you think of with Px,em,100%,rem?

We have come to realize that we have a lot of problems with PX as a unit of text size. The most important is that the user can not flexibly control the size of the text.
This may not be a problem for most users, but for older and less discerning visitors, they cannot change the size of the text by their browser as they wish. We take "customer first" as the principle, we should adopt a strategy, do not require 100% accuracy by PX units, we need to obtain a larger browser scalability and ease of use, flexible to meet the needs of visitors.

One, length units

The length unit is divided into two kinds, one is relative length and the other is absolute length.
The following are three units of relative length:
The size of EM relative to the parent object
The height of an ex relative to the letter x in a particular font
PX relative to the specific device resolution, this is the most commonly used units, but also we have been adhering to the unit. From a technical point of view, px pixels are actually a relative size unit of measure, which is related to the display or printing resolution of a particular device. For example, a pixel that is displayed on a computer screen is different from the size that is printed on the paper.

The following are the absolute length units of five font-size attribute values:

Absolute length units are useful when printing or when the physical dimensions of a screen display device are known.
in inch
CM cm
mm mm
PT Point
PC12 dot Movable

Second, the relative size of the key words

The Font-size property value relative to the size of the keyword has only two values:
Larger
Smaller
The settings for these two values are related to the parent object's setpoint. We can understand them as we understand old-fashioned <small><big>. They are the most basic way to set the size of a text and are affected by the text size definition of the upper object.

　　Three, absolute size of the key words

There are 7 of these keywords, and their actual size is determined by different browsers and devices.

Xx-small
X-small
Small
Medium
Large
X-large
Xx-large

Create a proposal browser development company, set the ratio between each keyword to 1.5. and recommended to keep this ratio constant, MOM medium is small 1.5 times times. The same large is 1.5 times times the size of medium.

　　Iv. percentage

The Font-size property value is used as a percentage to set the size, which is changed based on the container object text size. If we set the text size of body to 10. We set the text size of p to 150%, then the text size of P is 15. Regardless of the unit 10, the percentage is scaled as a proportion.

We used to have PX,%, em,px not much to say, em and% more say something:

Mobile HTML5 mobile Website font unit font-size Select px or REM
There are two types of situations:
① for a mobile device only, use PX to

② for the need to adapt to a variety of mobile devices, using REM, for example, only need to adapt to the iphone and ipad and other different resolution of the relatively large devices.

REM Reference Code:

HTML {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) {    html {        font-size:15px    }} @ Media screen and (min-width:640px) and (max-width:719px) {    html {        font-size:20px    }} @media screen and (Min-wi dth:720px) and (max-width:749px) {    html {        font-size:22.5px    }} @media screen and (min-width:750px) and (max-w IDTH:799PX) {    html {        font-size:23.5px    }} @media screen and (min-width:800px) and (max-width:959px) {
    html {        font-size:25px    }} @media screen and (min-width:960px) and (max-width:1079px) {    HTML {        font-size:30px    }} @media screen and (min-width:1080px) {    html {        font-size:32px    }}

EM is based on the current element (if not set to inherit its parent element) font-size .

The% is based on the parent element, and, for,,,, etc., is font-size line-height font-size text-indent margin padding width based on the width of the parent element.

Units in the CSS3:

Some new units are introduced in the CSS3:

• ch--the width of the character 0 (0);
• rem--the root element (HTML element) of the font-size;
• Vw--viewpoint width, window widths, 1VW equals 1% of the window width;
• Vh--viewpoint height, window height, 1VH equals 1% of the window height;
• The smaller of the VMIN--VW and VH.

Obviously VW, VH, and Vmin are for mobile devices, and if the window size changes, these three values will change accordingly.

REM unit feeling is the variant of px+em, whether it is worth using also depends on your own trade-offs: no PX precision and no em flexible-or, more flexible than PX, more accurate than em ~ ~ ... Xd...

What if font-size is not defined?

You don't have to worry about it, legends, browsers have an unprecedented default font-size:16px; , so even if you forget to define the initial values in the style file font-size , you can use EM and rem with confidence.

Browser support:

REM, each browser basically supports:

• ie9+
• ff3.6+
• Chrome 6+
• Safari 5+
• Opera 11.6+

VW, VH, Vmin:

• Chrome 26+
• Firefox 19+
• Safari 6.1+
• IE + + (partially supported)
• IOS Safari 6.1+ (partially supported)
• Android 4.4+

Similarly, the width or length of Xxrem (a rem of some value), Google is much larger than other browsers such as FF, Opera, because Chrome enforces a minimum font size of 12px, even if it is set to 10px, it will eventually appear as 12px.

EM is scaled relative to the parent font size, regardless of your screen size.

A study of Font-size