CSS布局单位

常见的CSS布局单位

1. px
   px是屏幕能显示的最小区域。
2. em和rem
   em和rem都是相对长度单位。em是相对于父元素，rem相对于root。
   • em：文本相对长度单位，相对父元素字体大小的倍数。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被设置，则相对于浏览器默认字体尺寸（16px）进行设置。
   • rem：相对于根元素的字体大小的倍数。使用rem可以实现响应式布局，当屏幕分辨率发生变化时，元素也随之变化。
3. %
   通过%可以实现响应式效果。一般认为子元素的百分比相对于父元素。
4. vw和vh
   vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度，除了vw和vh之外，还有vmin和vmax两个相关的单位。vmin代表vw和vh之中的较小值，vmax代表较大值。使用vw和vh也可以实现响应式。

px、em、rem的区别及使用场景

区别

1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
2. em和rem相对于px有更高的灵活性，他们是相对长度单位，其长度不固定，更适用响应式布局。
3. em相对父元素设置字体大小，这就有个问题：进行任何元素设置，都需要知道它父元素的大小，而rem只需要知道根元素的大小。

使用场景：

1. 对于只需要适配少数移动设备，且分辨率对页面影响不大的，使用px即可。
2. 对于需要适配各种移动设备，就用rem。