1rpx小程序的动态单位

如何保证不同的设备视觉上的大小一样

不同设备的分辨率不同，在屏幕上，每一个画面都是由许多的点组成的，也就是像素，简称px,也就是说一个图片由很多个px组成。但是随着设备分辨率的不同，每个像素大小都是不一样的。所以如果我们在不同的设备使用相同的px,那么在不同的设备上展示的效果肯定也是不一样的。
因此，我们需要有一个动态单位，可以通过不同设备来自动调整和适配。
苹果和 Google 对此都有相应的措施：

由于苹果对高分屏的优化良好，所以在 iOS 上，代码中的 1 px 所代表的实际像素数会根据不同设备动态调整，开发者不需要进行二次换算。
由于 Android 设备碎片化严重，Google 不得不建立了一个新的名叫「density-independent
pixel（密度无关像素，缩写为 dp）」的尺寸单位，以适应不同分辨率屏幕的尺寸换算。

微信也为小程序提供了一个动态单位解决方案：它就是 responsive pixel（动态像素），简称 rpx。

rpx = px * (目标设备宽 px 值 / 750)

那么目标设备宽度越大，1rpx代表的单位就越大，这样就能自动适应不同大小的设备，来保证它们的比例是一样的。

1rpx为什么可以自适应

rpx是相对单位，那么它是相对谁来说的呢，它的标准是啥呢？
它是相对于设备屏幕的宽带来说的，标准是375px，也就是750rpx,750像素，也就是说我们说的像素和rpx是相同单位的。
所以我们在开发的时候，可以选择标准机进行开发，使用rpx单位，我们可以计算出 rpx 和 px 之间的关系，当目标设备宽度为 375px使， 1rpx = 0.5 px;当目标设备宽度为 400px 时，1rpx = 400/375 rpx;也就是说我们使用的单位其实是px, rpx 是一个中间单位，最终渲染的效果是px， 方便我们可以不需要关注不同设备的宽度，使得开发更加统一。
这样就可以自动适应不同的设备宽带。

1rpx是动态的，它不是不变的，它的大小与设备的宽度大小成正比。不同的设备会有不同的宽度大小，通过一个基准来计算，调整大小。

由此可以看出，小程序在实现rpx转换时，不论是什么屏幕的手机，都是将屏幕宽度固定设为750rpx，然后根据实际屏幕的设备像素比dpr(dpr = 设备像素 / css像素)来进行转换的。具体对应关系如下：
1rpx = (number/ 750) * 设备宽度 px

在 iPhone 6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

开发微信小程序时设计师可以用 iPhone 6 作为视觉稿的标准。
也就是说，设计师在设计小程序时，可以这样做：

直接以 iPhone 6 的屏幕尺寸（375×667）用作视觉稿尺寸，1 px = 0.5 rpx；
以 1 px = 1 rpx 的标准，将设计稿尺寸设定为 750×1334。

补充一点，在设置的rpx值转换为px值大于0小于1时，不论设置的rpx值是多少，最终在dpr不是1的ios情况下会始终返回0.5px，其他情况始终返回1px；例如下面代码：

还有其他方式实现自适应吗

vw、vh适配
vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。
小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw
小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh

如图所示：右边box的宽度会随着窗口大小自动调整。
响应式布局
响应式的设计其实是css的切换，常用的方法是媒体查询

例如，下面的媒体查询进行测试，以知晓当前的Web页面是否被展示为屏幕媒体（也就是说不是印刷文档），且视口至少有800像素宽。用于.container选择器的CSS将只会在这两件前提存在的情况下应用。

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} 

响应式布局的问题在于需要维护多个类型的样式文件，维护成本太大，一般移动端页面不会优先考虑，更多的使用在pc端项目上。
rem
rem是近几年比较流行的方案，手淘移动web端就是采用此方案。由于1rem = 根元素的 font-size，所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果，不同的屏幕根元素设置不同的font-size尺寸，即可达到自适应的效果。如：

document.documentElement.style.fontSize = window.innerWidth + 'px'

然后设置页面中每个元素的宽高为相应的rem即可。

流式布局
流式布局需要用到百分比或者flex，即最外层容器宽度永远铺满页面宽度，但高度和其他单位仍然使用px。我个人比较推荐使用流式布局也一直在使用这种布局，因为流式布局不需要像rem那样额外通过js动态调整根元素的字体大小。虽然某些大屏幕下，无法100%还原设计稿，但这也是流式布局的精髓，它的字体精度可以跟设备系统一致。
scale伸缩
scale伸缩布局顾名思义，就是通过缩放页面来达到屏幕自适应。有两种方法，一是通过js更改viewport的initial-scale，这种方法比较麻烦，另一种是直接写死viewport的宽度，例如

<meta name="viewport" content="width=375, user-scalable=no">

意思就是告诉浏览器：这个页面我要一直用375px的宽度处理，在不同的尺寸上，麻烦伸缩一下。假如在320的iphone上，放大到375，在414的iphone上，缩小到375。这样我们只需要以375这个尺寸出设计稿就行，页面会伸缩适应。scale伸缩的问题在于，不能显式设置minimum-scale=1.0，否则就达不到效果。而显示设置这个值是chromium37以上的webview触发gpu raster的一个条件，所以用这种方法就没法利用gpu raster硬件加速。