常见的CSS布局单位%，px，em，rem，vh/wh和应用场景

💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

常见的CSS布局单位
常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。

1.px

        像素（px）是页面布局的基础，一个像素表示终端（电脑、手机、平板等）屏幕所能显示的最小的区域。

绝对单位,不会随浏览器页面大小的变化而变化

2.百分比%

        当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。一般认为子元素的百分比相对于直接父元素。

3.em

        文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)。

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

4.rem              

        rem是CSS3新增的一个相对单位，相对于根元素（html元素）的font-size的倍数。作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值来设置font-size的值，以此实现当屏幕分辨率变化时让元素也随之变化。

5.vh/wh

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

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

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

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

场景使用：
         vw、vh、vmin、vmax 常用于移动端的布局之中

总结：
对于只需要适配少部分移动设备，且分辨率对页面影响不大的，使用px即可 。
对于需要适配各种移动设备，使用rem，例如需要适配iPhone和iPad等分辨率差别比较挺大的设备。