前言
最近没啥工作，抽时间整理一下零碎的知识点，总结一下CSS中常用的单位。
绝对单位
即固定长度的单位，不会改变。
- pt: Points 磅
- in: Inches 英寸
- mm: Millimeter 毫米
- cm: Centimeter 厘米
- q: Quarter millimeters 1/4毫米
相对单位
长度会随着参考值的变化而变化
- px: Pixel 像素
- em: Element meter 根据文档字体计算尺寸
- rem: Root element meter 根据根文档（ body/html ）字体计算尺寸
- %: 百分比
- vw: View height 可视范围高度，1vw=视窗宽度的1%
- vh: View width 可视范围宽度，1vh=视窗高度的1%
物理像素（设备像素）
它是物理上的概念，随着设备生产出来就已经被确定了。例如iPhone5的分辨率是640x1136px，代表屏幕由640行、1136列像素点组成。
将一个图片细分，最小单位就是像素。也就是说，图片由许多的像素构成。像素是小方块，这些小方块都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子。
CSS像素
CSS像素的单位也叫做px。它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。谈论像素时一定要清楚它的上下文。
CSS像素是web编程的概念，是相对的而不是绝对的单位，因为平常电脑屏幕1px对应了1px物理像素，所以感觉不到两者的区别，会让你误以为CSS里的1px就是实际屏幕像素。
事实上只有zoom 100%的情况下，1个CSS像素才会等于1个设备像素。
- 默认情况下1个CSS像素应该是等于1个物理像素（PC端zoom 100%）。若手动将页面放大或缩小，1个CSS像素就不等于1个物理像素了。
- 在高PPI的设备上，CSS像素默认状态下就相当于多个物理像素的尺寸。比如iPhone的屏幕对比一般的手机屏幕会看起来更精细清晰一些，iPhone6,7,8都是两倍屏手机，即1个CSS像素等于2物理像素。iPhone6P等是三倍屏手机，1个CSS像素等于3物理像素。
rem
rem是相对单位，相对于根文档对象（ body/html ）内文本的字体尺寸而言，若未指定字体大小则继承为浏览器默认字体大小。（浏览器默认字体大小为16px)
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
2rem;
/* 2rem === 28px */
}
</style>
em
em是相对长度单位，相对于当前对象内文本的字体尺寸。若未指定字体大小则继承自上级元素，以此类推，直至 body，若body未指定则相对于浏览器的默认字体尺寸（浏览器字体默认为16px）。
<body>
<div class="element"></div>
</body>
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
2em;
/* 2em === 32px */
}
</style>
em 会层层继承父元素的字体大小，很容易造成字体大小的混乱。所以用rem会更好。
%
百分比笼统的说是相对于父元素。针对不同的CSS属性，百分比的表现有所不同。
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
<style>
.parent { 100px }
.children { 66.6% }
/* children的宽度为 66.6px */
</style>
vh vw
view height/view width，指相对于可视范围的高度和宽度，可视范围被均分为100单位的 vh/vw；可视范围是指屏幕可见范围，不是父元素的，百分比是相对于包含它的最近的父元素的高度和宽度。
假设设备可视范围为高度 900px，宽度 750px，则，1vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px。
<body>
<h1>article title</h1>
<div class="element"></div>
<div class="full-height"></div>
</body>
<style>
.element {
50vw;
height: 80vh;
/* 如果屏幕高度为1000px，则该元素高度为800px，vw 同理 */
}
.full-height {
height: 100vh;
/* 轻易实现了与屏幕同等高度的元素 */
}
h1 {
100vw;
/* 设置一个和屏幕同宽的标题，标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。 */
}
</style>