html px em pt length unit (pixel relative length point) knowledge (RPM)

HTML PX EM pt unit Area

First, PX\EM\PT unit introduction

px unit name is pixel , relative length unit, pixel (px) is a domestic recommendation relative to the display screen resolution;
The EM unit name is the relative length unit . Compared with the text in the current object font size, foreign use more;
The PT unit name is Point, and the absolute length unit is generally the old version of table using the length size unit but is not currently used.

A short description of the HTML unit:

px pixels pixel; relative length units.
Pt Point; Absolute length Unit
Em relative length units, here em with the HTML <em> tag "em" spelled exactly the same, and here em as individual text units.

1. Previously, IE could not adjust the size of the font using PX as the unit, but now almost IE supports the use of PX as the unit;

2. Most of the foreign sites can be adjusted because they use the EM as a 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 units. Pixel px is relative to the display screen resolution, QQ is also used px as the length width unit.

EM is the relative length unit. The font size relative to the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser.

Second, the HTML unit comparison case

1, simple small example:
width:300px width of 300 pixels
Width:300pt width of 300 points
Width:300em width of 300 relative length
Above we set different unit instances of the same value

2, the text set different length em px pt units Look at the effect:
CSS code:

1. . divcss5-px{font-size:12px}
2. . divcss5-pt{font-size:12pt}
3. . divcss5-em{Font-size:2em}

HTML code:

1. <div  class= "divcss5-px" > I'm divcss5. </div> 
2. <div class=< Span class= "Attribute-value" > "divcss5-pt" > I'm divcss5</ div> 
3. <div class= "Divcss5-em" > I'm divcss5</ Div> 

3, unit length comparison illustration

html PX PT EM Unit case Comparison chart

Three, EM and PX conversion

The default font height of any browser is 16px (16 pixels). All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.

12px equivalent to 9pt length;
12px equivalent to 0.75em length;
9pt equivalent to 0.75em length;
Generally we use the EM conversion px more

Advanced EM and PX conversions:
The default font height of any browser is 16px (16 pixels). All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em. To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.

Specific Use time:
We are declaring the initial font-size=62.5% for all HTML tags
Such as:
*{font-size=62.5%}
This later layout can be set according to the following techniques EM units
Font-size:1.2em equals font-size:12px.
Font-size:1.4em equals font-size:14px.
And so on the equivalent of the initial font-size=62.5%, the EM and PX units are only 10 times times the gap, in order to facilitate the calculation and set the EM length value to use.

Four, the EM unit has the following characteristics:

1. The value of EM is not fixed;

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

When we write CSS, if we want to use EM as the unit, 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 replace it with EM as the unit;

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

This is to avoid the 1.2 * 1.2 = 1.44 phenomenon. For example, when you declare a font size of 1.2em in #content, you can only have 1em when declaring the font size, not 1.2em, because this em is not em, it becomes 1em=12px because it inherits the #content font height.

However, 12px Kanji exception, is obtained by the above method 12px (1.2em) size of Chinese characters in IE does not equate directly with 12px defined font size, but slightly larger. This problem Jorux has been solved, just in the body selector to change 62.5% to 63% can be displayed normally. The reason may be that when IE processes Chinese characters, the accuracy of the value of floating point is limited. I wonder if there is any other explanation.

Five, recommended web units

Therefore, it is recommended to use PX (pixels) as a Web page production unit for unit conversion errors.

The above for you to introduce the PX EM pt units, and conversion method, generally now we use the length of units are PX for the length of units. Here we also recommend the use of PX (pixels) as the dimensions of the page size units , in accordance with the browser pixel units, but also to facilitate the calculation of length size.

About PX PT EM Unit Summary

1), recommended px pixels: Usually we use PX (pixel units) More, followed by EM units, usually recommended for everyone to PX units;
2), our display resolution in px pixels;
3), our QQ time is also in PX pixel units.

HTML px em pt length unit (pixel relative length point) knowledge (RPM)