95% of Chinese websites need to rewrite CSS-the difference between PX and em

95% of Chinese websites need to rewrite CSS-difference between PX and em
For a long time, I used 12px as the main font size of the website. 10px is too small, and the eyes are very tired. Although 14px is easy to see, it damages the aesthetic of the page. Only 12px is perfect in aesthetic and visual acuity.
Who has opinions on the font size of my website? My dad, he was the first person to tell me that he could not see my website. This makes me realize that 12px is actually just a good thing for me. For middle-aged and older people with obvious visual impairment, it is almost equal to 10 PX for me. So I told him to adjust the text size in "View. However, we found that this was futile. In Firefox, the font size can be easily adjusted. How does it become so "hard to adjust" in IE? What is the problem? I tried to open three major Chinese portals: Sina, Netease, and Sohu. Without exception, Their fonts lose their tonality in IE. It seems that this is not a problem exclusive to my website. Let's take a look at MSN, Google, a list apart, and the Washington Post, which are adjustable in IE.
Isn't ie discriminated against in font adjustment? The problem that plagued me was not solved until I saw this masterpiece: How to size text using EMS. Key points: 1. IE cannot adjust the font size that uses PX as the unit; 2. most foreign websites can be adjusted because they use EM as the font unit. 3. firefox can adjust PX and Em, but more than 96% of Chinese users use IE browser (or kernel ). This means that the font size of Chinese websites can be considered unadjustable. 95% of Chinese websites need to rewrite CSS in the Chinese websites I have observed, including the three major portals and the blue ideal of "leading" the Design Trend of Chinese websites, chinaui and others all use PX as the font unit. Only Baidu has an adjustable table rate. On the other side of the ocean, almost all mainstream sites use EM as the font unit, that is, adjustable. Yes, PX is easier to use than em, and I bet most readers don't know why or how much PX it is.
Foreign people pay so much attention to the ease of use of websites (accessibility), not only because of the inherent humanistic spirit, but also because there is a law to constrain them-such as Section 508 in the United States, to make websites easy to use. No mainstream site is willing to be put to court by people with impaired or impaired eyesight. Note: In China, Microsoft may be taken to court more simply. Why is ie so rigid for PX. How to rewrite your website CSS jorux.com as a site responsible for people with reduced vision, has rewritten the font-size part of CSS. Here, jorux and various humanistic websites discuss how to rewrite font-szie with EM.
What is em vs. PX em? Em indicates the font height. The default font height of any browser is 16 PX. Therefore, the unadjusted browsers all match: 1em = 16px. Then 12px = 0.75em, 10px = 0.625em. To simplify font-size conversion, you must declare font-size = 62.5% in the body selector in CSS, which changes the EM value to 16px * 62.5% = 10px, so that 12px = 1.2em, 10px = 1em, that is, you only need to divide your original PX value by 10, and then change to Em as the unit. Em has the following features: 1. Em values are not fixed; 2. Em inherits the font size of the parent element. Rewrite steps: 1. declare font-size = 62.5%; 2. divide your original PX value by 10 and change it to Em as the unit. Simply put, if you only need the above two steps to solve the problem, no one may use PX.
After the above two steps, you will find that your website font is too big to imagine. Because the EM value is not fixed and inherits the size of the parent element, You may set the font size to 1.2em in the content Div, that is, 12px. Then you set the font size of selector P to 1.2em. However, if p is a child of content, the font size of P is not 12px, instead, 1.2em = 1.2 * 12px = 14.4px. This is because the font size of content is set to 1.2em. This em value inherits the size of its parent-level element body, that is, 16px * 62.5% * 1.2 = 12px, and P is its sublevel, em inherits the font height of the content, that is, 12px. So the 1.2em of P is no longer 12px, but 14.4px. 3. recalculate the EM values of the enlarged fonts. Avoid repeated statement of font size, that is, avoid the 1.2*1.2 = 1.44 mentioned above. For example, if you declare in # content that the font size is 1.2em, the font size of P can only be 1em, not 1.2em, because this EM is not em, it becomes 1em = 12px because it inherits the font of # content.
The strange 12px Chinese character (cause to be checked) I found a strange phenomenon when converting em, that is, the 12px (1.2em) obtained by the above method) the size of Chinese Characters in IE is not equal to the font size defined by 12 PX, but a little larger. I have solved this problem. You only need to change 62.5% to 63% in the body selector to display it normally. The reason may be that when ie processes Chinese characters, the floating point value accuracy is limited. Do you have other explanations for reading this article? This phenomenon only occurs in 12 PX Chinese characters, and does not exist in English. You can download the file that shows this phenomenon here. After the download, the reader uses ieto open sample.htm. The first text is obviously longer than the second one. Then you can use the editor to open style.css to see what happened. To solve this problem, replace 62.5% in style.css with 63%.
Demonstrate what improvements can be made through the link: 1. CSS on your website is so complex that you do not know the subordination of elements that it is difficult to rewrite CSS; 2. most people will not rewrite CSS after reading this article; 3. most people do not know that the browser can adjust the font size of the page. Therefore, you need a font size adjustment control, such as in the information box on this site. I believe that the reader's English skills on this site are no longer arrogant here. Please refer to: The text changer