What is the difference between px and em in html5

Difference: 1. The unit length is different, px is the unit of digital image length, and em is a multiple of the character width; 2. The relative objects are different, px is relative to the monitor screen resolution, and em is relative to the display screen resolution. The font size of the text within the current object. 3. The value of px is fixed, it is whatever you specify, and the calculation is easier; the value of em is not fixed, and em will inherit the font size of the parent element.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

PX

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

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

EM

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

EM Features

1. The value of em is not fixed;

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

The difference between px and em:

1. Different unit lengths

px is the length unit of the digital image, and em is the multiple of the character width.

2. Different relative objects

px is relative to the monitor screen resolution, em is relative to the font size of the text in the current object.

3. Different values ​​

The value of px is fixed. It is whatever you specify, and the calculation is easier. The value of em is not fixed, and em inherits the font size of the parent element.

Note:

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, Font-size=62.5% needs to be declared 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.

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

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

2. Change your Divide the original px value by 10, and then replace it with em as the unit;

3. Recalculate the em value of the 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.

Related recommendations: "html video tutorial"

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