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

Source: Internet
Author: User

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;

Related Article

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.