Deeply understand the differences between px, em, and rem, as well as their advantages and disadvantages

When we layout the page, we often need to set the length, width and height of the box. So what units are used for these lengths, widths and heights? In fact, domestic design masters all like to use px, while most foreign websites like to use em and rem. So what are the differences between px, em, and rem, and what are the advantages and disadvantages of each? Next, I will introduce it to you, friends who need it can take a look.

px features:

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

2. Most foreign websites can adjust it The reason is that it uses em or rem as the font unit;

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

px pixels (Pixel). Relative length unit. Pixels px are relative to the display screen resolution. (Quoted from CSS2.0 manual)

em is a relative length unit. 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 (16px). (Quoted from the CSS2.0 manual)

The default font height of any browser is 16px. All unadjusted browser tofu: 1em=16px. Then 10px=0.625px. In order to simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector of css, which makes the em value become 16px*62.5%=10px, so 10px=1em, that is to say, you only need to change the original Just divide the px value by 10, and then replace it with em as the unit.

em features:

1.em value is not fixed

2.em will inherit the font size of the parent element.

So when we write CSS, if we declare font-size=62.5% in the body selector, then divide the original px value by 10, and then replace it with em as the unit; recalculate those using em as the unit value to avoid repeated declaration of font size.

That is to avoid the phenomenon of 1.2*1.2=1.44. For example, if you declare the font size to be 1.2em in #content, 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 is highly variable because it inherits the font size of #content. For 1em=12px.

rem features:

rem is a new relative unit (root em root em) added to CSS3. This unit has attracted widespread attention. What is the difference between this unit and em? The difference is that when using rem to set the font size for an element, it is still a relative size, but it is only relative to the HTML root element. This unit can be said to combine the advantages of relative size and absolute size. Through it, you can adjust all font sizes proportionally by modifying only the root element, and you can avoid the chain reaction of compounding font sizes layer by layer. Currently, all browsers except IE8 and earlier support rem. For browsers that do not support it, the solution is very simple, which is to write an additional absolute unit statement. These browsers ignore font sizes set with rem. Here is an example:

p{font-size:14px;font-size:875rem;}

Note:

What font unit you choose to use is mainly determined by your project. If your user base all uses the latest version of the browser, it is recommended to use rem, if you want to consider compatibility, use px, or use both at the same time.

Here we provide you with a px, em, rem unit conversion tool. Address: http://pxtoem.com/

The above is the detailed content of Deeply understand the differences between px, em, and rem, as well as their advantages and disadvantages. For more information, please follow other related articles on the PHP Chinese website!