CSS px, EM, REM, PT usage and differences

PX: A virtual length unit, which is the digitized image length unit of a computer system, is converted into physical length and requires a longitude dpi. Windows system By default is 96dpi,apple system default is 72dpi.

  一个相对长度单位，像素px是相对于显示器屏幕分辨率而言的。

But IE cannot adjust which uses PX as the unit font size, most of the foreign sites can adjust the original intention is that it uses EM or REM as a font unit.

EM: A unit of relative length, generally referred to as a multiple of the width of a character, using a similar percentage, such as: 0.8em, usually 1em=16px.

   相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。

But the EM value is not fixed, it inherits the font size of the parent element.

"The default font height for any browser is 16px. 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. ”

REM: is a new relative unit of CSS3,

PT: A physical unit length, which refers to one inch of 72 points.

Em and REM

The difference between EM and REM 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 the relative size and absolute size of the advantages in one, through he can only modify the root element to proportionally adjust all the font size, You can also avoid the chain reaction of the font size by layer, and currently, all browsers, except IE8 and earlier versions, support REM. For unsupported browsers, the workaround is simple enough to write an absolute unit statement. These browsers ignore the REM-set font size

CSS px, EM, REM, PT usage and differences