Do you know the difference between em and px in CSS?

Domestic websites, including the three major portals, as well as Blue Ideal, which "leads" the trend of Chinese website design, ChinaUI, etc., all use px as the font unit. Only Baidu has set an adjustable example. On the other side of the ocean, almost all mainstream sites use em as the font unit, which is adjustable. Yes, px is easier to use than em, and most readers don't know what em is or how much px it is. Foreign people attach so much importance to website accessibility (Accessibility), not only because of its deep-rooted humanistic spirit, but the direct reason may be because there is a law to restrict them - such as Section 508 in the United States, which forces websites to achieve a certain level of accessibility.

Key points:

IE cannot adjust the font size that uses px as the unit;

The reason why most foreign websites can adjust is that they use em as the font unit ;

Firefox can adjust px and em, but more than 96% of Chinese netizens use IE browser (or kernel).

px pixels (Pixel). Relative length unit. Pixels px are relative to the monitor screen resolution.

em is a relative unit of length. The font size relative to the text within the current object. If the current font size for inline text has not been manually set, it will be relative to the browser's default font size.

The default font height of any browser is 16px. All unmodified browsers conform to: 1em=16px. Then 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, you need to declare Font-size=62.5% in the body selector in CSS, which makes the em value become 16px*62.5%=10px, so 12px=1.2em, 10px=1em, also That is to say, you only need to divide your original px value by 10, and then change to em as the unit.

em has the following characteristics:

The value of em is not fixed;

em will inherit the font size of the parent element.

So when we write CSS, we need to pay attention to a few points:

Declare Font-size=62.5% in the body selector;

Change your original px value Divide by 10, and then change to em as the unit;

Recalculate the em value of those enlarged fonts. Avoid repeated declarations of font sizes.



That is to avoid the phenomenon of 1.2 * 1.2= 1.44. For example, if you declare the font size in #content to be 1.2em, then when you declare the font size of p, it can only be 1em, not 1.2em, because this em is not that em, and it inherits the font height of #content. It became 1em=12px.


But the exception is 12px Chinese characters, that is, the 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size directly defined by 12px in IE, but are slightly larger. This problem has been solved by Jorux. Just change 62.5% to 63% in the body selector and it will display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values ​​is limited. I don't know if there is any other explanation.

The above is the detailed content of Do you know the difference between em and px in CSS?. For more information, please follow other related articles on the PHP Chinese website!