Difference between PX and EM (CSS needs to be rewritten for 95% of Chinese websites)

For a long time, I used 12px as the main font size of the website. 10px is too small,EyesIt is easy to get 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?

Where 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. The reason why most foreign websites can be adjusted is that 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.

CSS needs to be rewritten for 95% of Chinese Websites
I have observed that Chinese websites, including the three major portals, and the blue ideals that "lead" The Design Trend of Chinese websites, chinaui, etc. 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 itsHumanistic SpiritThe direct reason may be that there is a law to constrain them-for example, the United StatesSection 508To 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, a site responsible for people with impaired vision, has rewritten the font-size section of CSS. Here, jorux and various humanistic websites discuss how to rewrite font-szie with EM.

Em Vs. Px

what is 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 of CSS, this 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, 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 procedure:
1. declare font-size = 62.5% in the body selector;
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.

A strange 12px Chinese character (reason to be checked)
I found a strange phenomenon when converting em, that is, 12px (1.2em) obtained from 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. This phenomenon 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%. Demo link

What improvements can be made?

Why do we need improvement:
1. CSS on your website is too complex to know the subordination of elements. It is difficult to rewrite CSS;
2. After reading this article, most people will not rewrite CSS;
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

Important reference:
1. How to size text using EMS
2. The text changer