css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景

简答版

px：绝对单位，其他的是相对单位
% ：相对于父元素的宽高比
em：相对于当前元素的font-size
rem：相对于根节点的font-size
vw：屏幕宽度的1%
vh：屏幕高度的1%
vmin：两者的最小值，vmax两者的最大值

详细版

1. px

• 绝对单位,不会随浏览器页面大小的变化而变化
• px是像素（pixel）的缩写

2. % (百分比)

• 相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变
• position:fixed的元素 --> 相对于ViewPort（可视窗口）
• 场景使用：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。

3. em

• em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

• 如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

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

• 场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。

4. rem

• rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

5. vh 与 vw

视区：浏览器内部的可视区域大小，即 window.innerWidth/window.innerHeight 大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

• vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；

• vh：表示视口的高度，1vh就表示当前视口高度的百分之一；

• vmin：表示在vw与vh中取最小值；

• vmax：表示在vw与vh中取最大值。

• 场景使用：
  1、 vw、vh、vmin、vmax 常用于移动端的布局之中
  2、视区相关单位vw, vh…简介以及可实际应用场景

---

备忘
浏览器内部宽度大小：window.innerWidth
浏览器的宽度大小：window.outerWidth
显示器的宽度大小：screen.width