How to Select font units and front-end fonts when multiple devices adapt to front-end development

How to Select font units and front-end fonts when multiple devices adapt to front-end development

When using a mobile web or app, you may need to write a lot of css code for different screen sizes to adapt to different screens, at this time, we need a lot of code to set the font size with a fixed size. At this time, we need to use the relative size, so that we need to modify the value of the specified root element. The new font unit rem also appeared in css3. We recommend using em as the font unit in almost all books and articles about adaptive webpage design, we recommend that you use em as the unit for setting the size. What if em and px are converted?

1 bytes font-size of the parent element × pixel value to be converted = em Value

There are a lot of articles about this, which have been well summarized by others. There is no waste of time here, leaving the following URL

Powerful EM in CSS

Http://www.w3cplus.com/css/px-to-em

Difference of px em rem in WEB Front-end development

Http://www.qianduanview.com/571.html

Adaptive Web Design)

Http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html

Conversion between em and px

 

Common web font units

Pixel (px)

Determine the length based on the display resolution. This unit is usually used in web applications;

Font height (em)

The size of the current text. For example, {font-size: 2em} indicates that the text size is twice the original size. The default font size of the browser is 16 PX, and 2em = 32px is not set.

Root em (rem)

Rem is also a relative unit (rem = root em). Obviously, rem is changed by em, or rem is an upgraded version of em. Root em is relative to the root directory em rather than relative to the parent element, that is, although it is an absolute value, it is only relative to the root directory html, it does not change with other elements. that is to say, we only need to set the html text size. you don't have to consider other factors.

 

Other uncommonly used web font units

Points (pt)

Determine the length based on the font size defined by windows;

Inches (in), centimeters (cm), and millimeters (mm)

The length is determined based on the actual size displayed. This type of unit does not change with the display resolution;

12pt (pc)

That is, the size of the 12 font size defined by windows is 1 pc = 12pt ). The number entered before the Unit represents a multiple of the font size. For example, {font-size: 2 pc;} indicates that the text size is 24pt;

Font x height (ex)

The height of the current letter "x;