95% of Chinese websites need to rewrite Css_ experience exchange

Source: Internet
Author: User
For a long time, I used 12px as the main font size for the site. 10px is too small, EyesEasy to fatigue, 14px, although easy to see, but damage the beauty of the page. Only 12px is just right for both aesthetic and visual acuity.

Who has a comment on the font size of my website?
My dad, he was the first person to tell me that I couldn't see the text on my website. This makes me realize that 12px, in fact, just makes me feel very good, and for those who have a noticeable decline in the middle-aged and above, almost equal to 10px for my feeling.
So I told him to adjust the "text size" in "view" to do it. But found that it was in vain. In Firefox can easily adjust the size of the font, how the IE has become so "not adjustable"?

What's the problem ?
I try to open three big portals in China-Sina, NetEase, Sohu. Their fonts without exception in IE lose the tunable. It seems that this is not the unique problem of my website. Take a look at the Msn,google,a list apart, The Washington Post, which is adjustable in IE. is IE in font adjustment also make discrimination?
The problem that bothered me until I saw this masterpiece: How to size text using EMS, only to get a thorough solution.
Key points :
1. IE cannot adjust the font size using PX as the unit;
2. Most of the foreign sites can be adjusted because they use the EM as a font unit;
3. Firefox can adjust px and em, but more than 96% of Chinese netizens use IE browser (or kernel). This means that the font size of the Chinese website can be considered to be non-adjustable.

95% of Chinese websites need to rewrite CSS
In the Chinese website I have observed, including three portals, and "leading" the Chinese website design trend of the blue ideal, chinaui, etc. are used PX as a font unit. Only Baidu somehow made an adjustable example.
On the other side of the ocean, almost all mainstream sites use EM as a font unit, which is also adjustable.
Yes, PX is easier to use than EM, and I bet most readers don't know what em is or how many px it's worth.
Foreign people attach great importance to website usability (accessibility), not only because of its rooted human spirit , the direct reason may be because there is a law to restrain them-such as the U.S. section 508, forcing the site to achieve a certain ease of use. So no major site is willing to be the eyes of those who have fallen or mutilated people to sue.
Note: In China, it may be easier to bring Microsoft to court, why IE is so rigid for PX.

How to rewrite your website CSS
Jorux.com as a responsible site for visually impaired people, has rewritten the font-size part of CSS. Here, Jorux and the various humanistic website owners discuss how to rewrite Font-szie with EM.

em vs. px

What is EM?
em refers to the high font size, and the default font height for any browser is 16px. So the unmodified browser is compliant with: 1EM=16PX. So 12px=0.75em, 10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit. EM has the following characteristics:
1. The value of EM 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 then replace it with EM as the unit;
Simply put, if you only need the above two steps to solve the problem, probably no one will use PX. After these two steps, you will find that your website font is too big to imagine. Because the value of EM is not fixed and inherits the size of the parent element, you might set the font size to 1.2em, or 12px, in the content div. Then you set the selector p font size to 1.2em, but if P is a child of content, the font size of P is not 12px, but 1.2em=1.2 * 12px=14.4px. This is because the font size of the content is set to 1.2em, the EM value inherits the size of the body of its parent element, which is 16px * 62.5% * 1.2=12px, and P as its child, EM inherits the content of the font high, 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 duplicate declaration of font size, that is, avoid the above mentioned 1.2 * 1.2 = 1.44 phenomenon. For example, when you declare a font size of 1.2em in #content, you can only have 1em when declaring the font size of p, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the font height of #content.

Bizarre 12px Kanji (reason unknown origin)
I also found in the completion of the EM conversion of a strange phenomenon, is obtained by the above method 12px (1.2em) size of Chinese characters in IE does not equate directly with 12px defined font size, but slightly larger. This problem I have solved, you just need to change 62.5% in the body selector to 63% will be able to display the normal. The reason may be that when IE processes Chinese characters, the accuracy of the value of floating point is limited. Do you have any other explanations for reading this article?
This phenomenon occurs only in 12px kanji, which does not exist in English. You can download this file here to show this behavior. After downloading, please use IE to open sample.htm, you can see the first paragraph is significantly longer than the second paragraph. Then you can use the editor to open the style.css and see what happened. The solution is to change the 62.5% in Style.css to 63%. Demo Link

What other improvements can be made

Why we need to improve:
1. Your website CSS is too complex to know the dependencies of the elements, it is difficult to rewrite the CSS;
2. Most people will still not rewrite CSS after reading this article;
3. Most people do not know that the browser can adjust the font size of the page.

So you need a font sizing control such as this site info box.
Believe that the reader's English ability, here is no longer wordy, please see: the Text Changer

Important Reference:
1. How to size text using EMS
2. The Text Changer

Remark :
1. Since the website reboot, dad also reflected I all day in the "attribute one" "attribute two", see not understand, has refused to visit jorux.com;
2. Readers have any questions about how to rewrite CSS with em or the font sizing control, please leave a message;
3. The following improvements have been made in enhancing ease of use:a. Rewrite css with em; b. Removed 51.la and text ad code, improve the speed of web page loading; c. Added font resizing controls;
4. Re-organize the "other Blogger" link, please find that the site is removed link to the website to remove the link to this site, the site stop exchange links. The sites that are still retained have the following characteristics:a. Non-diary blog;b. good content;c. Original-oriented;
5. The site of the regular post in Monday, spaced for a week or so, thank the reader for the attention of the site, in addition to Monday, you do not need to update the site feed.

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