User experience comes first, font-size abandons px and chooses em_Experience exchange

In today's Internet era that advocates usability design and user experience design, CSS must also participate in it. Most people always define the overall font size first when writing CSS code. In Chinese cases, it is usually 12px. However, in fact, the "View-Text Size" setting in the top menu of IE has no effect. It is undoubtedly a very bad user experience for viewers who feel that the font size is too small. In fact, all this can be avoided, that is, use em units as font display units.

The default font height of the browser is 16px, so the unadjusted browser displays 1em=16px. If converted, it means 1px=0.0625em, that is, 12px=0.75em, 10px=0.625em. Through 1px=0.0625em, you can convert px to em when writing CSS. But there is a more convenient method, keep reading!

This method requires the use of the % unit (only once). In fact, % and em can be understood simply as the former only has two more zeros than the latter. In order to simplify the conversion of font-size, you can declare font-size=62.5% globally in the body in CSS. The % algorithm here is the same as em, 100%=16px, 1px=6.25%, 10px=62.5%. That is, the default font size is defined to be 10px. Many beginners may define 0.625em here or directly define 12px. This has no effect. You must define font-size=62.5%! Since em has the characteristic of inheriting the font size of the parent bleed element, which is 1em=10px, so 12px=1.2em. The conversion between px and em can be obtained through 10, which is very convenient!

In addition, one thing must be noted. It may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. The 12px font that appears at 62.5% under the body is a little larger than the directly defined one. As long as the Just change 62.5% to 63%. Through the above adjustments to the CSS code, you will find that your website is one step closer to user experience design. This is very important in today's Internet era that advocates usability design and user experience design.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Script Home <a href="</title">www.jb51.net</a> </title>> <style type="text/css"> body{ font-size:63%; } </style> <p style="font-size:1.2em;">font-size:1.2em Alimanman (can be adjusted)</p> <p style="font-size:12px;">font-size:12px Alimanman (cannot be adjusted)</p> <p style="font-size:1.2em; color:#F90;">You can adjust the font display size through "View - Text Size" in the top menu of IE</p>
[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]