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>
|