像素单位总结

px：像素单位。受分辨率的影响。

rpx：小程序像素单位。根据屏幕宽度做过适配，省心。

em：相对单位（相对父级）。1em=16px

rem：相对单位（相对html标签）。设备html的像素大小即可完成响应式，其实也就是等比缩放了。

vw、vh：百分比单位。1vw=1%宽度、1vh=1%高度。由于各个屏幕宽高比例不同，偶尔用它做适配。

媒体查询：根据屏幕宽度加载不同的css，达到响应式适配的目的。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

常见的响应式布局办法：

1，使用媒体查询。这个办法的优势在于自定义程度高，但是要花费较多的精力编写‘另一套css’

2，使用rem。这个其实就是进行了缩放，网站还是原来的样子。

3，使用栅格布局。通过栅格布局，再加上媒体查询。即可完成一个优美的响应式布局，这个布局设计、架构写好了可以省很多适配的代码。