常见单位：px、em、rem、vw、vh及之前区别，使用

px

px：绝对单位，页面按精确像素展示

em

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

<body>body
    <div class="div1">div1
        <div class="div2">div2
            <div class="div3">div3</div>
        </div>
    </div>
</body>

计算关系是这样的：

1
2
3

div {
    font-size: 1.5em;
}

body的font-size是继承自跟元素html，html的尺寸是浏览器默认尺寸14px；
div1的font-size=1.514px = 21px;
div2的font-size=1.521px = 31.5px;
div3的font-size=1.5*31.5px = 47.25px;

rem

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px, 子节点rem的计算还是以12px为基准)

1
2
3

.div3 {
    font-size: 1.5rem;
}

此时div3的font-size = 1.514px = 1.5html的font-size

在所有现代浏览器中，其默认的字体大小就是“16px”。因此在浏览器下默认的设置将是：
1em = 16px

使用vw，vh时，需设置meta缩放比1:1

1	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

vw

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

vh

vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

vmin

vmin：vw和vh中较小的那个。

vmax

vmax：vw和vh中较大的那个。

相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。
比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。
很容易实现与同屏幕等高的框：

1
2
3

.slide {
    height: 100vh;
}

设置一个和屏幕同宽的标题，

1
2
3

h1 {
    font-size: 100vw
}

那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。
5. vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。
6. 浏览器的宽度设置为1200px，高度设置为800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果宽度设置为600px, 高度设置为1080px, 1vmin就等于6px, 1vmax则未10.8px。
7. 有一个元素，你需要让它始终在屏幕上可见：

.box {
    height: 100vmin;
    width: 100vmin;
}

如果你要让这个元素始终铺满整个视口的可见区域：

.box {
    height: 100vmax;
    width: 100vmax;
}