摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。
rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案：
响应式（Responsive web design)
rem
流式布局
scale伸缩布局
响应式响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。
remrem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的rem布局demo，通过设置
document.documentElement.style.fontSize = window.innerWidth + "px";
然后设置的宽高等于1rem，就可以使box的宽高自适应各种设备尺寸。因为box的单位1em是跟页面设备的宽对应的，所以能做到自适应各种尺寸。
流式布局流式布局需要用到百分比或者flex，即宽度永远铺满页面宽度，但高度和其他单位仍然用px。我个人比较推荐用流式布局，因为流式布局不需要像rem那样额外通过js动态调整根元素的字体尺寸。虽然某些大屏幕下，无法100%还原设计稿，但这也是流式布局的精髓，它的字体精度可以保持跟设备系统一致（dpi）。
scale伸缩布局scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，另一种是直接写死viewport的宽度，例如：，意思就是告诉浏览器：这个页面我要一直用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的设计稿写代码即可，不必担心它在各个平台的适配情况，实际上在各个平台都会长得一样，从此妈妈再也不用担心我的页面适配问题啦。
参考链接：
https://www.chromium.org/deve...
https://mp.weixin.qq.com/debu...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80705.html
摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...
摘要：布局上面四个方法，各有优缺点，现在回头看看微信的，相信大家已经有所启发，实际上就是系统级的把页面按比例分割份，，或者伸缩布局的。也就是说，微信小程序的布局帮大家把布局的设置根元素字体尺寸这步省了，或者减少了伸缩布局不能开启的问题。 rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信...
摘要：组件化开发小程序在未出现组件之前，要重用的话，只能简单复制粗暴黏贴组件化开发的优势可复用代码分离，可维护更重要定义组件先创建文件夹用于存放组件，然后再创建组件文件夹注意组件的文件名并不是组件名，而页面文件名是页面名，组件名是引用时才确定的引 组件化开发 小程序在未出现组件之前，要重用的话，只能简单（复制）粗暴（黏贴） 组件化开发的优势： 1、可复用（wxml/wxss/js） 2、代...
阅读 2042·2021-09-22 15:43
阅读 8376·2021-09-22 15:07
阅读 1057·2021-09-03 10:28
阅读 2028·2021-08-19 10:57
阅读 1025·2020-01-08 12:18
阅读 2958·2019-08-29 15:09
阅读 1498·2019-08-29 14:05
阅读 1584·2019-08-29 13:57
