User experience first font-size give up PX Select Em_ Experience Exchange

Source: Internet
Author: User
In today's network era, which advocates usability design and user experience design, CSS is also involved. Most people in the CSS code is always the first definition of the overall font size, the Chinese case is generally 12px, and in fact, in this way through the IE top menu in the "View-Text size" setting has no effect. It's certainly a bad user experience for a browser with a small font feel. In fact, all this can be avoided, that is, the use of EM units as a font display units.

The browser's default font height is 16px, so an unadjusted browser is showing 1em=16px. Conversion over the words that is 1px=0.0625em, that is, 12px=0.75em, 10px=0.625em, through the 1px=0.0625em can be written in CSS through px into EM. But there is a more convenient way to continue looking down!

This method to use the% unit (only 1 times), in fact, the percent and EM simple words can be understood as the former is only 2 more than the latter 0. In order to simplify the conversion of font-size, you can be in the body of the CSS in the first global declaration font-size=62.5%, here the algorithm and the same as EM, 100%=16px,1px=6.25%,10px=62.5%, That is, the default font size of 10px is defined. Many beginners may define 0.625em here or directly define 12PX, which is ineffective and must be defined font-size=62.5%! Since EM has characteristics that will inherit the font size of the parent bleed element, this is 1em=10px, so 12px=1.2em. PX and EM conversion through 10 can be obtained, very convenient!

In addition, it must be noted that, perhaps the IE processing of Chinese characters, the value of floating point accuracy is limited, the body under the 62.5% out of the 12px font than the direct definition of a little larger, as long as the 62.5% into 63%. By adjusting the CSS code above, you will find that your site is a step closer to user experience design, which is important in today's network era, which advocates usability design and user experience design.
<textarea id="runcode21053"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> scripting House www.jb51.net</title> <style type=" Text/css "> body{font-size:63%; } </style> </pead> <body> <p style= "FONT-SIZE:1.2EM;" >font-size:1.2em Ali full Alimanman (can be adjusted) </p> <p style= "FONT-SIZE:12PX;" >font-size:12px Ali Full Alimanman (cannot adjust) </p> <p style= "FONT-SIZE:1.2EM; Color: #F90; " > You can adjust font display size by "View-Text Size" in the IE top menu </p> </body> </ptml></textarea>
[Ctrl + A full selection Note: If you need to introduce external JS need to refresh to execute]
  • 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.