web前端常用长度单位（px，em，rem，pt）

• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

• em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px，为了简化font -size的换算，可以在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 

  em有如下特点：

1. 因为“em”就是一个相对值，em的值并不是固定的；

2. em会继续父级元素的字体大小。

3. 计算公式：1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值，这样的情况下“1.4em”可以            是“14px”,也可以是“20px”，或者说是“24px”。

• rem（root em，根em）：是CSS3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容，对于不兼容的浏览器写一个绝对单位的声明就可以了。

  
  
  

• 3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
  

一个px、em、pt单位转换工具：

地址：http://pxtoem.com/

• px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

• em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.5em, 1em,2em等，通常1em=16px，为了简化font -size的换算，可以在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 

  em有如下特点：

1. 因为“em”就是一个相对值，em的值并不是固定的；

2. em会继续父级元素的字体大小。

3. 计算公式：1 ÷ 父元素的字体大小 × 需要转换的像素值 = em值，这样的情况下“1.4em”可以            是“14px”,也可以是“20px”，或者说是“24px”。

• rem（root em，根em）：是CSS3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素就可以成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。兼容性IE9+都可以兼容，对于不兼容的浏览器写一个绝对单位的声明就可以了。

  
  
  

• 3、pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
  

一个px、em、pt单位转换工具：

地址：http://pxtoem.com/

获取更多的文章，欢迎关注微信公众号