移动端自适应布局&微信小程序rpx

rpx是微信小程序推出的一个新单位，经过rpx可让咱们的页面根据屏幕宽度进行自适应，这一举措解决了一直令前端头疼的屏幕适配问题。

而在rpx出现以前，web页面的自适应布局已经有前人总结了一些解决方案，那为何微信还要整出rpx这个新单位吗，难道只是单纯为了显示“咱们不同”？在解释这个问题以前，咱们先简单了解一下目前的主流自适应布局解决方案：

响应式

响应式布局的问题在于须要维护多个类型的样式文件，维护成本太大，通常移动端页面不会优先考虑，更多的使用在pc端项目上。

rem布局

rem是近几年比较流行的方案，手淘移动web端就是采用此方案。因为1rem = 根元素的 font-size，因此rem布局的本质就是经过rem把页面按比例分割达到自适应的效果，不一样的屏幕根元素设置不一样的font-size尺寸，便可达到自适应的效果。如：

document.documentElement.style.fontSize = window.innerWidth + 'px'

而后设置页面中每一个元素的宽高为相应的rem便可。

流式布局

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

scale伸缩布局

scale伸缩布局顾名思义，就是经过缩放页面来达到屏幕自适应。有两种方法，一是经过js更改viewport的initial-scale，这种方法比较麻烦，另外一种是直接写死viewport的宽度，例如

<meta name="viewport" content="width=375, user-scalable=no">

意思就是告诉浏览器：这个页面我要一直用375px的宽度处理，在不一样的尺寸上，麻烦伸缩一下。假如在320的iphone上，放大到375，在414的iphone上，缩小到375。这样咱们只须要以375这个尺寸出设计稿就行，页面会伸缩适应。scale伸缩的问题在于，不能显式设置minimum-scale=1.0，不然就达不到效果。而显示设置这个值是chromium37以上的webview触发gpu raster的一个条件，因此用这种方法就无法利用gpu raster硬件加速。

rpx布局

上面四个方法，各有优缺点，如今咱们再来看看微信的rpx。rpx实际上就是系统级别的rem(把页面按比例分割750份，1rpx=window.innerWidth/750)，或者经过scale布局将页面的宽度缩放到750.也就是说rpx布局帮咱们把rem布局的js设置根元素字体尺寸这一步骤省略了，或者是解决了scale伸缩布局不能开启gpu raster的问题。

经过rpx，咱们只须要根据750的设计稿写代码便可，没必要担忧在各个平台的适配状况。一次开发，在各个平台都会长得如出一辙！