CSS相关单位(pt,px,PPI,DPI,em,rem)

目录

• 1. 单位介绍
• 2. 换算关系

单位介绍

• pt:磅（point），绝对单位，印刷行业常用，等于1/72英寸(即0.03526厘米，1英寸 = 2.54厘米)。

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

• PPI:像素密度（Pixel Per Inch），每英寸所拥有的像素数量。因此PPI数值越高，即代表显示屏能够以越高的密度显示图像。当然，显示的密度越高，拟真度就越高。

• DPI:点数密度（Dots Per Inch）,每英寸所拥有的点数。是打印机、鼠标等设备分辨率的单位。这是衡量打印机打印精度的主要参数之一，一般来说，该值越大，表明打印机的打印精度越高。比如戴尔显示器U2515的像素间距为0.216毫米，即DPI=117。（2.54/0.0216）但是在本文讨论中，只考虑在显示设备上的情况，不再区分PPI,DPI。

• em:相对长度单位。相对于当前对象（父级）内文本的字体尺寸而言。它的值不是固定的，会继承父级元素的字体大小。任意浏览器的默认字体是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，常在css中的body选择器中声明font-size: 62.5%;，这就使1em变为 16px×62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将原来的px数值除以10，然后换上em作为单位即可。

• rem:根元素大小（font size of the root element）。“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道父元素的大小，在多次使用时，就会带来无法预知的连锁反应错误风险。而rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个参考值。比如：

  html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
  body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
  h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

---

换算关系

1. 1pt = (DPI / 72)px
2. DPI = PPI
3. PPI = 屏幕对角线上的像素点数/对角线长度 = (√(屏幕横向像素点^2 + 屏幕纵向像素点^2))/对角线长度
4. 1em = 16px(默认)