rpx是微信小程序新推出的一个单位，按官方的定义，rpx可以根据屏幕宽度进行自适应，在rpx出现之前，web页面的自适应布局已经有了多种解决方案，为什么微信还捣鼓出新的rpx单位？
1.响应式布局的问题在于需要维护多个样式文件，维护成本太大，一般的移动H5页面都不会优先考虑。
2.rem是近几年比较流行的方案，淘宝移动web端就是采用此方案，由于1rem=根元素font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，因为rem是相对根路径font-size尺寸，不同的页面设置不同的font-size尺寸，即可达到自适应的效果。
3.流式布局需要用到百分比或者flex，即宽度永远铺满页面宽度，但高度和其他单位仍然用px。
4.scale伸缩布局顾名思义，就是通过拉伸缩小页面来达到自适应。有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，另一种是直接写死viewport的宽度，例如：<meta name="viewport" content="width=360, user-scalable=no">，意思就是告诉浏览器：这个页面我要一直用360px的宽度处理，在不同的尺寸上，麻烦伸缩一下。
上面四个方法，各有优缺点，现在回头看看微信的rpx，rpx实际上就是系统级的rem.
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
设备
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6s 1rpx = 0.552px 1px = 1.81rpx
微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx
注：开发微信小程序时设计师最好用 iPhone6 作为视觉稿的标准。##
建议：设计稿使用设备宽度750px比较容易计算750px的话1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算
rpx布局
微信的rpx，相信大家已经有所启发，rpx实际上就是系统级的rem（把页面按比例分割750份，1rpx=window.innerWidth/750），或者scale伸缩布局的width=750。也就是说，微信小程序的rpx布局帮大家把rem布局的js设置根元素字体尺寸这步省了，或者减少了scale伸缩布局不能开启gpu raster的问题。
通过rpx，大家只需要根据750的设计稿写代码即可，不必担心它在各个平台的适配情况，实际上在各个平台都会长得一样，从此妈妈再也不用担心我的页面适配问题啦。
（微信小程序相关样式）
小程序的样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
示例代码：
/** common.wxss **/
.small-p { padding:5px;}
** app.wxss **/
@import "common.wxss";
.middle-p { padding:15px;}
小程序内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
<view style="color:{{color}};" />
class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。
<view class="normal_view" />
小程序的全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。
网友评论