微信小程序新单位rpx与自适应布局

rpx是微信小程序新推出的一个单位，按官方的定义，rpx能够根据屏幕宽度进行自适应，在rpx出现以前，web页面的自适应布局已经有了多种解决方案，为何微信还捣鼓出新的rpx单位？在解释这个单位前，咱们先简单了解一下目前的主流的自适应布局解决方案：

1. 响应式（Responsive web design)

2. rem

3. 流式布局

4. scale伸缩布局

响应式

响应式布局的问题在于须要维护多个样式文件，维护成本太大，通常的移动H5页面都不会优先考虑。

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是跟页面设备的宽对应的，因此能作到自适应各类尺寸。

流式布局

流式布局须要用到百分比或者flex，即宽度永远铺满页面宽度，但高度和其余单位仍然用px。我我的比较推荐用流式布局，由于流式布局不须要像rem那样额外经过js动态调整根元素的字体尺寸。虽然某些大屏幕下，没法100%还原设计稿，但这也是流式布局的精髓，它的字体精度能够保持跟设备系统一致（dpi）。

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硬件加速。

rpx布局

上面四个方法，各有优缺点，如今回头看看微信的rpx，相信你们已经有所启发，rpx实际上就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。也就是说，微信小程序的rpx布局帮你们把rem布局的js设置根元素字体尺寸这步省了，或者减小了scale伸缩布局不能开启gpu raster的问题。

经过rpx，你们只须要根据750的设计稿写代码便可，没必要担忧它在各个平台的适配状况，实际上在各个平台都会长得同样，今后妈妈不再用担忧个人页面适配问题啦。

 

参考连接：

1. https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization

2. https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html