CSS to understand the difference between the unit EM and px

Learn css to understand the difference between the unit EM and PX 2007-11-13 07:06 Author: Anonymous Source: Forum collation of the Executive editor: a Ride cat

In the domestic website, including the three major portals, as well as "leading" the Chinese website design trend of the blue ideal, chinaui and so are using PX as a font unit. Only Baidu has made an adjustable example. On the other side of the ocean, almost all the mainstream sites use EM as a 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 so attached importance to the usability of the website (accessibility), not only because of its root-rooted humanistic 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.

Key points :

1. IE cannot adjust the font size used for PX as the unit;

2. Most of the foreign websites can be adjusted because of their use of EM as font units;

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

　　px pixels (Pixel). Relative length units. Pixel px is relative to the screen resolution of the Monitor.

　　em is the relative length unit. The font size relative to the text within the current object. If the font size of the current text in the row is not set artificially, it is relative to the browser's default font size.

The default font height for any browser is 16px. All the unadjusted browsers are compliant: 1EM=16PX. So 12px=0.75em,10px=0.625em. In order to simplify the conversion of font-size, it is necessary to declare font-size=62.5% in the body selector in 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 replace EM 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.

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

1. The body selector declares the font-size=62.5%;

2. Divide your original PX value by 10, then replace EM as the unit;

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

That is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, if you declare a font size of 1.2em in #content, you can only 1em when declaring P's font size, not 1.2em, because this em is not the other em, it becomes 1em=12px because it inherits the #content font height.

But the exception of 12px Chinese characters is that the 12px (1.2em) size of Chinese characters obtained by the above method is not equal to the font size defined directly with 12px, but slightly larger. This problem Jorux has been resolved, only in the body selector in the 62.5% to 63% can be normal display. The reason may be that when IE deals with Chinese characters, the precision of floating-point values is limited. Don't know if there's any other explanation.