95% of Chinese websites need to rewrite CSS, and 95% of Chinese website css

Source: Internet
Author: User

95% of Chinese websites need to rewrite CSS, and 95% of Chinese website css
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, 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. 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 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, 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 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. The em value is not fixed;
2. em inherits the font size of the parent element.

Rewrite steps:
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 to solve the problem in the above two steps, 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.

Strange 12px Chinese characters (reason to be checked)
I also found a strange phenomenon when converting em, that is, the size of 12 PX (1.2em) Chinese characters obtained from the above method is not equal to the font size defined by 12 PX directly in IE, but a little bigger. 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%. 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

Note:
1. Since the Reboot website, my dad has reported that I have been "attribute 1" and "attribute 2" all day. I don't quite understand that I have refused to access Jorux.com;
2. If you have any questions about how to use em to override css or the font size adjustment control, please leave a message;
3. this site has made the following improvements to enhance ease of use:. rewrite css with em; B. delete 51. la and text advertisement code improve the webpage loading speed; c. added the font size adjustment control;
4. reorganize the "Other Blogger" link. Please find that the link of the website that has been removed from the link is removed from the link on your own, and the site stops exchanging links. Websites that are still retained have the following features: a. Non-diary blog; B. Excellent content; c. Originality-oriented;
5. This site usually publishes a post on Monday, which is separated by one to two weeks. Thank you for your attention to this site. You will not need to update the Feed on this site except Monday.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.