本篇主要列举并比较下CSS中常用到的几个长度单位。包含px、em、rem、vh、vw、rpx、in、cm、mm、ex、pt、pc。

px

px(Pixel)像素。相对长度单位。1px等于计算机屏幕上的一个点像素的宽度。px是相对于显示器屏幕分辨率而言的。

em

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

em特点

  1. em的值并不是固定的
  2. em会继承父级元素的字体大小

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em = 16px。那么12px = 0.75em，10px = 0.625em。
如果使用em作为当前项目的单位，为了简化font-size的换算，需要在CSS中的body选择器中声明font-size=62.5%，这就使em值变为 16px * 62.5% = 10px，这样12px = 1.2em，10px=1em，也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

rem

rem(Font size of the root element)是CSS3新增的一个相对单位，指相对于根元素（即html元素）的字体大小的单位。

rem特点

  1. 可以做到只修改根元素就成比例地调整所有字体大小
  2. 避免px em混用导致的字体复数计算

如果使用rem作为当前项目的单位，可以设置

1
2
3
html {
    font-size: 100px;
}

那么10px就可以表示为.1rem

vh/vw

vh(Viewport height)相对于视口的高度。视口被均分为100单位的vh，通过vh可以在不知道视口高度的情况下设置一个相对视口的高度。同理，vw指相对于视口的宽度。

用法

1
2
3
4
.banner {
    height: 100vh;
    width: 100vw;
}

rpx

rpx(Relative pixcel) 相对像素。只有在小程序中采用的长度计算值。以屏幕宽度恒为750rpx来计算。以iPhone6来讲，屏幕宽度为375px，所以在iPhone6中，375px = 750rpx，也就是1rpx = 0.5px。

其他

多是一些绝对长度单位
1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

单位 含义
in 英寸
pt 磅 (1pt = 1/72 in)
cm 厘米
mm 毫米
q 1/4毫米 (1q = 1/4mm)
pc 派卡（Picas）(1pc = 12px)
ex 相对长度单位 ex 代表了字符 x 的高度(通常是字体尺寸的一半)
ch 相对长度单位 ch 代表了字符 0 的宽度

一些坑

PC chrome有12px最小字号限制，若使用10px会造成pc调试困难带来不必要的麻烦，所以可以设置字号为12px，然后通过 transform: scale(.8) 来达到同样的效果。