Understand the usage of html px em pt length units

html px em pt unit area

1. PX\EM\PT unit introduction - TOP

pxThe unit name is pixel, relative length unit, pixel (px) is the domestic recommendation relative to the monitor screen resolution;
emThe unit name is relative Length unit . Relative to the font size of the text in the current object, it is used more abroad; Extended reading: html em tag, html em emphasis tag
ptThe unit name is point ( Point), Absolute length unit. Generally, older versions of tables use length size units, but they are basically not used now.

htmlShort introduction to units:

Px Pixel; relative length unit.
Pt Point; absolute length unit
Em is a relative length unit, where em is spelled exactly the same as the "EM" of the html tag, and here em is used as a separate text unit.

1. In the past, IE could not adjust the font size that used px as the unit, but now almost IE supports it and it is recommended to use px as the unit;

2. Most foreign websites can The reason for the adjustment is that it uses em as the font unit;

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

px pixels (Pixel). Relative length unit. Pixel px is relative to the monitor screen resolution, and QQ screenshots also use PX as the length and width unit.

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.

2. HTML unit comparison case - TOP

1. Simple example:
Width: 300px Width is 300 pixels
Width:300pt The width is 300 points
Width:300em The width is 300 relative length
Above we set different unit examples of the same value

2. Set different lengths for the text em px pt Unit to see the effect:
CSS code:

.pcss5-px {
    font-size:12px
}
.pcss5-pt {
    font-size:12pt
}
.pcss5-em {
    font-size:2em
}

HTML code:

<p class="pcss5-px">
    我是pcss5
</p>
<p class="pcss5-pt">
    我是pcss5
</p>
<p class="pcss5-em">
    我是pcss5
</p>

3. Em and px conversion - TOP

The default font height of any browser is 16px (16 pixels). 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.

12px is equivalent to 9pt length;
12px is equivalent to 0.75em length;
9pt is equivalent to 0.75em length;
Generally we use em to convert px more

Advanced em to px conversion:
The default font height of any browser is 16px (16 pixels). 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.

Specific usage time:
We declare the initial font-size=62.5% for all html tags
For example:
*{font-size=62.5% }
The following layout can be set according to the following techniques. The em unit
font-size:1.2em is equal to font-size:12px
font-size:1.4em is equal to font-size:14px
By analogy, after the initial font-size=62.5%, the em and px units are only 10 times different, making it easier to calculate and set the em length value.

4. The em unit has the following characteristics: - TOP

1. The value of em is not fixed;

2. em will inherit the parent The font size of level elements.

If we want to use em as the unit when writing CSS, we need to pay attention to two points:

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

2. Divide your original px value by 10, and then change to 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 to be 1.2em in #content, then the declared font size can only be 1em, not 1.2em, because this em is not the other em, and it changes due to inheriting the font height of #content. For 1em=12px.

However, the exception is 12px Chinese characters. 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.

5. Recommended web page units - TOP

#So in order to avoid unit conversion errors it is recommended to use PX (pixels) as the web page production unit.

The above introduces you to the px em pt unit and the conversion method. Generally, the length unit we use now uses px as the length unit. Here we also recommend using px (pixel) as the size and length unit of the webpage, which is consistent with the browser's pixel unit and also to facilitate calculation of length and size.

About px pt em unit summary - TOP

#1), recommended px pixel unit: usually we use px (pixel unit) more, followed by em Unit, it is usually recommended that you use px as the unit;
2), our display resolution is in px pixels;
3), our QQ screenshots are also in px pixels.

The above is the detailed content of Understand the usage of html px em pt length units. For more information, please follow other related articles on the PHP Chinese website!