本文介绍了微信小程序中引入的新单位rpx，它基于屏幕宽度实现自适应布局。文章讨论了响应式、rem、流式布局、scale伸缩布局等常见自适应方法，并分析了它们的优缺点。rpx类似于系统级的rem，简化了微信小程序的适配过程，避免了其他方法的某些问题，使得开发者可以更方便地进行页面布局。
rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？在解释这个单位前，我们先简单了解一下目前的主流的自适应布局解决方案：
- 响应式（Responsive web design)
- rem
- 流式布局
- scale伸缩布局
响应式
响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。
rem
rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。为了方便理解，我写了一个简单的rem布局demo，通过设置
document.documentElement.style
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
