CSS tutorial: We recommend that you use em for font-size

Source: Internet
Author: User

In today's Internet era that advocates usability design and user experience design, CSS should also be involved together. In CSS coding, most people always define the font size first, which is generally 12px in Chinese, in fact, the "View-text size" setting in the top menu of IE has no effect. It is undoubtedly a poor user experience for those who feel the font is too small. In fact, this can be avoided, that is, the em unit is used as the font display unit.
 
The default font height of the browser is 16 PX, so the unadjusted browser displays 1em = 16 PX. In this case, 1px = 0.0625em, 12px = 0.75em, 10px = 0.625em. Through 1px = 0.0625em, you can convert px to em in CSS Writing. However, there is a more convenient way to continue reading!
 
This method uses % units (only once). In fact, % and em are two zeros more than the former. To simplify the font-size conversion, you can first declare font-size = 62.5% in the body of css. Here, % of the algorithm is the same as em, 100% = 16px, 1px = 6.25%, 10px = 62.5%, that is, the default font size is 10 px. Many beginners may define 0.625em or directly define 12px here. This is ineffective. Be sure to define font-size = 62.5%! Because em has the font size that inherits the parent bleeding element, this is 1em = 10px, so 12px = 1.2em. The conversion between px and em can be obtained through 10, which is very convenient!
 
In addition, it is important to note that when IE processes Chinese characters, the accuracy of floating point values is limited. The 12px font of 62.5% in the body is a little larger than the one defined directly, you only need to change 62.5% to 63%. Through the above adjustments to the CSS code, you will find that your website is one step closer to the user experience design, in today's Internet era that advocates usability design and user experience design, this is very important.

The code is as follows: Copy code


<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = utf-8"/>
<Title> Web teaching network test </title>
<Style type = "text/css">
Body {
Font-size: 63%;
}
</Style>
</Head>
<Body>
<P style = "font-size: 1.2em;"> font-size: 1.2em Webpage Tutorial Network (adjustable) </p>
<P style = "font-size: 12px;"> font-size: 12px Webpage Tutorial Network (not adjustable) </p>
<P style = "font-size: 1.2em; color: # F90;"> You can adjust the font display size by "view-text size" in the top menu of IE. </p>
</Body>
</Html>

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.