The difference between px,em,rem,pt in CSS and the four conversions?

This article is important to explain the difference between px,em,rem,pt and the conversion between the four.

EM units have 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.

EM features

REM is a new relative unit of CSS3 (root em, root em), and this unit has aroused widespread concern. What is the difference between this unit and EM? The difference is that when you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM. Here is

An example:

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

Attention:

Choosing which font units to use is primarily up to your project, and if your user base is using the latest version of the browser, it is recommended to use REM, if you want to consider compatibility, use PX, or both.

Here you will find a Px,em,rem unit conversion tool

Address: http://pxtoem.com/

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 in the whole HTML tag declaration of the initial font-size=62.5% such as: *{font-size=62.5%} can be set according to the following techniques the EM unit font-size:1.2em equals font-size : 12pxfont-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, so as to facilitate the calculation and set the EM length value to use.

Note: Understand the EM values of the padding and margins.

When the EM value is used for padding and margins, its value is relative to the font size of the element, not relative to the parent element's font size (you might think so). The formula for calculating the EM value of the padding and margins is: the font size/element size = value to be specified.

Example: Imagine a simple example where the paragraph p is defined as {font-size:14px;padding:0.5em}. So, it's on the four sides of the padding is 7px, because 7/15=0.5. If you modify the font size to 20px, the padding automatically becomes 10px. This is the effect of relative units such as EM-as the layout zooms in or out, the proportions of the layout remain the same.

In the same way, the margins are the same as the inner margins.

The difference between px,em,rem,pt in CSS and the four conversions?