1. Introduction of PX\EM\PT unit

The name of the px unit is pixel, the relative length unit, pixel (px) is the domestic recommendation relative to the screen resolution of the monitor;

The em unit name is a relative length unit. Compared with the font size of the text in the current object, it is used more abroad;

The name of the pt unit is Point . The absolute length unit generally uses the length size unit in the old version of the table, but it is basically not used now.

Brief introduction of html unit:

Px pixel Pixel ; relative length unit.

Pt point ( Point ); absolute length unit

Em relative length unit, where em and html <em> tag "EM" spelled the same, and here em as a separate text unit.

1. In the past, IE could not adjust the font size of those using px as the unit, but now almost IE supports the use of PX as the unit here;

2. The reason why most foreign websites can be adjusted is that they use em as the font unit;

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

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

em is a relative length unit. Relative to the font size of the text in the current object. If the current font size of the text in the line has not been manually set, it is relative to the browser's default font size.

Two, html unit comparison case

1. A simple example:

Width:300px       //宽度为300像素 
Width:300pt       //宽度为300点 
Width:300em       //宽度为300相对长度 

以上我们设置相同数值的不同单位实例

2. Set different length em px pt units for the text to see the effect:

CSS code:

.Hello-px{ font-size:66px}
.Hello-pt{ font-size:66pt}
.Hello-em{ font-size:6em}

HTML code:

<div class="Hello-px">Hello</div>
<div class="Hello-pt">Hello</div>
<div class="Hello-em">Hello</div>

3. Comparison diagram of unit length

Three, em and px conversion

The default font height of any browser is 16px ( 16 pixels). All unadjusted 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 16px*62.5%=10px , so that 12px=1.2em , 10px=1em , also That is to say, you only need to divide your original px value by 10 , and then replace it with 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 conversion between em and px:

Specific use time:

We are initially declaring font-size=62.5% for all html tags

Such as:

*{font-size=62.5%}

Then the layout behind this can be set according to the following techniques to set the em unit


font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px

The analogy is equivalent to the initial font-size=62.5% , the em and px unit is only 10 times the difference, so that it is convenient to calculate and set the em length value.

4. The em unit has the following characteristics:

1. The value of em is not fixed;

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

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 replace it with em as the unit;

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

That is to avoid the phenomenon of 1.2 * 1.2 = 1.44 . For example, if you declare a font size of 1.2em in #content , then the declared font size can only be 1em instead of 1.2em , because this em is not that em, and it changes due to the height of the font inheriting #content For 1em=12px .

However, the exception of 12px Chinese characters is that the 12px (1.2em) Chinese characters obtained by the above method are not equal to the font size defined directly with 12px in IE , but are slightly larger. To solve this problem, just change 62.5% to 63% in the body selector to display normally. The reason may be that when IE processes Chinese characters, the accuracy of floating point values is limited.

The difference between px, em, pt in html