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