新的微信小程序单元rpx和自适应布局

的宽高等于1rem，盒子的宽高可以适配各种设备尺寸。因为box的单位1em对应的是pagedevice的宽度，所以可以适配各种尺寸。流式布局流式布局需要使用百分比或者flex，即宽度始终填满页面宽度，但高度等单位仍然使用px。我个人推荐使用流体布局，因为流体布局不需要像rem那样通过js动态调整根元素的字体大小。虽然在一些大屏幕下不可能100%还原设计稿，但这也是流体布局的精髓所在，它的字体精度可以与设备系统（dpi）保持一致。ScalestretchablelayoutScalestretchablelayout，顾名思义，就是通过页面的伸缩来实现自适应。有两种方法，一种是通过js改变viewport的initial-scale，比较麻烦，另一种是直接写viewport的width，比如：意思是告诉浏览器：本页面我会一直使用360px的宽度，请缩放不同的尺寸。如果在320iPhone上，放大到360，在375iPhone上，缩小到360。这样我只需要制作360大小的设计稿，页面就会拉伸适配。实际效果可通过手机访问：scaledemo。缩放的问题是不能显式设置minimum-scale=1.0，否则达不到效果。而这个值是chromium37以上的webview触发gpu光栅的一个条件，所以这种方法不能使用gpu光栅硬件加速。以上四种rpx布局方式各有优缺点。现在回头看看微信的rpx。相信大家都受到了启发。rpx其实就是系统级的rem（把页面按比例分成750份，1rpx=window.innerWidth/750），或者说是scale弹性布局的width=750。也就是说，微信小程序的rpx布局帮你省去了rem布局在js中设置根元素字体大小的步骤，或者说减少了scalestretch布局打不开gpu光栅的问题。通过rpx，你只需要按照750的设计稿写代码，不用担心它在各个平台的适配问题。事实上，它在每个平台上看起来都一样。从此，妈妈再也不用为我的页面适配操心了。.参考链接：https://www.chromium.org/deve...https://mp.weixin.qq.com/debu...