rpx是微信小顺序新推出的一个单元，按官方的定义，rpx能够依据屏幕宽度举行自顺应，在rpx涌现之前，web页面的自顺应规划已有了多种解决计划，为何微信还捣鼓出新的rpx单元？在诠释这个单元前，我们先简朴相识一下如今的主流的自顺应规划解决计划：
rem
流式规划
scale伸缩规划
相应式
相应式规划的题目在于须要保护多个款式文件，保护本钱太大，平常的挪动H5页面都不会优先斟酌。
rem
rem是近几年比较盛行的计划，淘宝挪动web端就是采纳此计划，由于1rem=根元素font-size，所以rem规划的实质就是经由过程rem把页面按比例支解到达自顺应的结果，由于rem是相对根途径font-size尺寸，差别的页面设置差别的font-size尺寸，即可到达自顺应的结果。为了轻易明白，我写了一个简朴的rem规划demo，经由过程设置
document.documentElement.style.fontSize = window.innerWidth + 'px';然后设置<div class="box"></div>的宽高即是1rem，就能够使box的宽高自顺应种种装备尺寸。由于box的单元1em是跟页面装备的宽对应的，所以能做到自顺应种种尺寸。
流式规划
流式规划须要用到百分比或许flex，即宽度永久铺满页面宽度，但高度和其他单元依然用px。我个人比较引荐用流式规划，由于流式规划不须要像rem那样分外经由过程js动态调整根元素的字体尺寸。虽然某些大屏幕下，没法100%复原设想稿，但这也是流式规划的精华，它的字体精度能够坚持跟装备体系一致（dpi）。
scale伸缩规划
scale伸缩规划望文生义，就是经由过程拉伸减少页面来到达自顺应。有两种要领，一是经由过程js变动viewport的initial-scale，这类要领比较贫苦，另一种是直接写死viewport的宽度，比方：<meta name="viewport" content="width=360, user-scalable=no">，意义就是通知浏览器：这个页面我要一向用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的设想稿写代码即可，没必要忧郁它在各个平台的适配状况，实际上在各个平台都邑长得一样，今后妈妈再也不必忧郁我的页面适配题目啦。
参考链接：
