CSS中常用单位总结：px rem em vh vw

前言

最近没啥工作，抽时间整理一下零碎的知识点，总结一下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>