In today's web age, which advocates usability design and user experience design, CSS is also involved. Most people in the CSS code is always defined in the overall font size, in the Chinese case is generally 12px, and in fact, in this way, in the top menu through IE "View-text size" setting has no effect. It is no doubt a bad user experience for a viewer who feels too small for the font. In fact, all this can be avoided, that is, using the EM unit as a font display unit.
The browser's default font height is 16px, so the unadjusted browser displays 1em=16px. Conversion over the words that is to say 1px=0.0625em, that is, 12px=0.75em, 10px=0.625em, through the 1px=0.0625em you can write in CSS through px into EM. But there is a more convenient way to continue looking down!
This method is used in% units (only 1 times), in fact% and em simple words can be understood as the former only 2 0 more than the latter. In order to simplify the conversion of font-size, we can first globally declare font-size=62.5% in the body of CSS, where the% algorithm is the same as EM, 100%=16px,1px=6.25%,10px=62.5%, This defines the default font size of 10px. Many beginners may define 0.625em or directly define 12PX, which is ineffective, and must define font-size=62.5%! Because EM has the character of the font size that inherits the parent bleed element, this is 1em=10px, so 12px=1.2em. PX and EM conversion through 10 can come, very convenient!
In addition there is a point must be noted, may be IE processing Chinese characters, for floating-point value accuracy is limited, in the body 62.5% out of the 12px font than the direct definition of a little bit bigger, as long as the 62.5% to 63% on it. By tweaking the CSS code above, you will find that your site is a step closer to the user experience design, which is important in today's web age, which advocates usability design and user experience design.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>www</title> <style type= "Text/css" > body{ font-size:63%; } </style> <body> <p style= "FONT-SIZE:1.2EM;" >font-size:1.2em (can be adjusted) </p> <p style= "FONT-SIZE:12PX;" >FONT-SIZE:12PX (Unable to adjust) </p> <p style= "FONT-SIZE:1.2EM; Color: #F90; > You can adjust the font display size by "View-text size" On IE top menu </p> </body>
|