响应式布局-微信小程序

rpx布局
       微信的rpx，就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。通过rpx，大家只需要根据750的设计稿写代码即可，不必担心它在各个平台的适配情况，实际上在各个平台都会长得一样。
以下简单介绍其他布局
scale伸缩布局
        scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，另一种是直接写死viewport的宽度，例如：<meta name="viewport" content="width=360, user-scalable=no">，意思就是告诉浏览器：这个页面我要一直用360px的宽度处理，在不同的尺寸上，麻烦伸缩一下。假如在320的iphone上，放大到360，在375的iphone上，缩小到360。这样我只需要以360这个尺寸出设计稿就行，页面会伸缩适应。实际效果可以通过手机访问：scale伸缩demo。scale伸缩的问题在于，不能显式设置minimum-scale=1.0，否则就达不到效果。而这个值是chromium37以上的webview触发gpu raster的一个条件，所以用这种方法就没法利用gpu raster硬件加速。
流式布局
       流式布局需要用到百分比或者flex，即宽度永远铺满页面宽度，但高度和其他单位仍然用px。
rem
       rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的rem布局demo，通过设置
       document.documentElement.style.fontSize = window.innerWidth + 'px';
然后设置<div class="box"></div>的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。
响应式
       响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。

 

 

转载于:https://www.cnblogs.com/bingbingaiqi/p/9708221.html