百分比布局

高度固定，宽度使用百分比，通常使用max-width/min-width控制尺寸范围过大或者过小。但是屏幕尺寸相对于设计稿跨度过大的话，会拉伸明显。常用在pc端适配。

flex布局

屏幕尺寸相对于设计稿跨度过大的话，会拉伸明显。常用在pc端适配

rem布局

rem是相对于根元素(html)的字体大小来计算，1rem=1font-size。设置html标签的font-size，用rem代替px设置布局，常常配合flexible.js使用。常用作移动端的适配，相对于百分比布局，不会有明显拉伸

• 设置适配屏幕的html的font-size值
• 用rem设置容器的宽高

// 这里把设计稿宽度750px看成是10等份
// 算出x的值即为适配屏幕的html的font-size值
设备宽度（单位：px）/x = 设计稿宽度（单位：px）/10
// 算出某个容器的宽度，根据每1个rem是75px
容器的宽100px -->100/75(rem)

vh/vw

vw这个单位永远相对于视口宽度进行计算，100vw = 一个视口的宽度。因为相对于视口， 失去了最大宽度/高度的限制。

媒体查询

针对不同宽度的设备进行不同布局和样式的设置