Differences between px, em, and rem in css

Most domestic designers like px, while most foreign websites like em and rem. What are the differences between them and their advantages and disadvantages?

PX features

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

2. Most foreign websites can be adjusted because they use em or rem as the font unit;

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

Pixel (Pixel ). The unit of relative length. Pixel px is relative to the screen resolution of the monitor. (Derived from the CSS2.0 manual) em is the unit of relative length. The font size relative to the text in the current object. If the font size of the text in the row is not set manually, the default font size is relative to that of the browser. (Derived from the CSS2.0 manual)

The default font height of any browser is 16 PX. All unadjusted browsers 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 features

1. The em value is not fixed;

2. em inherits the font size of the parent element.

Therefore, when writing CSS, pay attention to the following two points:

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;

3. Recalculate the em values of the enlarged fonts. Avoid repeated statement of font size.

That is, to avoid 1.2*1.2 = 1.44. 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.

Example

The code is as follows:	Copy code
Html {font-size: 100% ;} . Box-0 { Height: 1em;/* The height is equal to 16 PX */ } Www.111cn.net . Box-1 { Font-size: 0.625em;/* the base font size is changed to 16*0.625 = 10px */ Height: 1em;/* the actual height is 10 PX */ }

Rem features

Rem is a new relative unit (root em, root em) added to CSS3, which has aroused widespread attention. What is the difference between this unit and em? The difference is that when rem is used to set the font size for the element, it is still the relative size, but it is only the HTML root element. This unit combines the advantages of relative size and absolute size. With this unit, you can adjust all font sizes proportionally by modifying only the root element, it can also avoid the chain reaction of compound font size layer by layer. At present, all browsers except IE8 and earlier versions support rem. For browsers that do not support it, the solution is very simple, that is, to write an absolute unit statement. These browsers ignore the font size set with rem. The following is an example:

The code is as follows:	Copy code
P {font-size: 14px; font-size:. 875rem ;}

Example

The code is as follows:	Copy code
. Box { Font-size: 14px;/* compatible with ie678 */ Font-size: 0.875em; }

Note:

Selecting the font unit is mainly determined by your project. If your user group uses the latest browser, we recommend using rem. If you want to consider compatibility, you should use px, or use both.

Here is an article on px, em, and rem units.

Rem also seems to be a relative size value, which is relative to the root element

The 14 above emTable is a variable. Relative to your setting of the html font size of the root element, if you set it to 62.5%, the divisor is changed to 10, as shown in the right figure:

I don't know what the benefits of using this rem unit are. But if the font size of your root element is 62.5%, the conversion between px and rem is that px is divided by 10 to get rem, this is much simpler than em, and now I have not figured out how the conversion between em and px.

In addition, rem versions earlier than ie8 and ie8 do not support other browsers. If you want to consider ie8 and later, you can set a px file and a rem file like the default twentytwelve file.