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的设计稿写代码即可,不必担心在各个平台的适配情况。一次开发,在各个平台都会长得一模一样!