移动设备的分辨率和rpx

从一张设计图的实现说起

为什么模拟器下 iPhone6的分辨率是375，而设计图一般给750？

pt也称为逻辑分辨率

pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位

px指物理分辨率，和屏幕尺寸没有关系。点没有大小之说

1个pt可以由一个px构成，也可以有两个，还可以有三个甚至更多

iPhone6下2个px才构成一个pt

以iPhone6物理像素750X1334为视觉稿进行设计，而在小程序中使用rpx为单位

iPhone6下1px = 1rpx = 05pt

使用rpx，小程序会自动在不同的分辨率下进行转换，而使用px单位则不会

iPhone6下1px = 1rpx   (容易换算)

iPhone plus 下 1px = 06rpx

该功能基于vue-cli3；cli2的方法大差不差

以上两步就可以实现小程序中rpx功能，针对设计稿为750px的移动端。

微信小程序这个幺蛾子，不仅自己搞了一套所谓 WXSS 的样式表，还创造了一个新的单位 rpx 。

这时候问题就来了，现在的设计稿一般基于 iPhone6（375px × 667px），势必在其他尺寸的手机中有有所不同。在手机浏览器上，为了消除差异，我们可以使用 rem 作为单位，通过改变 html 下的 font-size 来消除在不同尺寸手机上的差异，但是在微信小程序上只能通过 rpx 来消除。

在使用 sass 时，前辈们已经实现了从 px 转换到 rem 的各种轮子，其中比较赞的有 @pierreburel 所编写的 sass-rem 。本文所使用的轮子也是 fork 自 sass-rem 。

基于前辈们的努力，我便重写了 sass-rem ，以适用于 rpx 的场景。

具体项目请参见： sass-rpx

SCSS

CSS

SCSS

CSS

关于是否使用rpx还是px，首先需要明白两者之间的区别。

rpx：微信小程序中的尺寸单位rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。微信官方建议视觉稿以iphone6为标准，一般设计师出图为2倍图。

px：iphone6上1px=2rpx

1rpx相当于1个物理像素，何为物理像素，就相当于我们所使用的屏幕的尺寸，只不过换了一种说法叫物理像素，而我们平时css中所用到的px,实际上是数据显示的尺寸，比如文字，、设计样式的盒子的大小1rpx的出现为我们搭起了物理像素与样式像素px之间的桥梁，而且根据屏幕宽度进行自适应

<view class="box">rpx的像素</view>

<view class="bo">px的像素观察</view>

box{  width:300rpx;  height:200rpx;  border:1rpx solid black;  font-size:30rpx;}bo{   width:300px;  height:200px;  border:1px solid black;  font-size:30px;}

结果：

所以，小程序中字体大小用rpx还是px要结合设计师出图的文字大小，建议的话还是以rpx为主。

以上就是关于移动设备的分辨率和rpx全部的内容，包括:移动设备的分辨率和rpx、如何在vue的web页面中像小程序中使用rpx单位做兼容、sass-rpx 微信小程序开发 px -> rpx 转换等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！