> 原创文章 > 移动设备的分辨率与小程序的rpx

移动设备的分辨率与小程序的rpx

原创文章 admin 2020-02-24 16:50:58 238 阅读 0 评论

简介 为什么手机模拟器的iPhone 6的分辨率是375,然后设计师给的设计图一般都是750 ?微信小程序中怎么去适配不同的机型?

1、为什么手机模拟器的iPhone 6的分辨率是375,然后设计师给的设计图一般都是750 

想要解答这个问题,必须得回到移动端的本质上面来,跟web端不同的是,想要开发移动应用,就需要了解分辨率的这些概念。

分辨率.png

联合上面这张图,主要说一下分辨率(pt)与 分辨率(px)的关系:

分辨率(pt):称为“逻辑分辨率”,简单理解为是一个长度的单位,与屏幕的尺寸有关系。iPhone 3与iPhone 4屏幕尺寸都是3.5寸,所以它的逻辑分辨率都是 320 x 480,相当于是视觉上的长度单位。

分辨率(px):称为“物理分辨率”,与屏幕的尺寸没有任何关系,可以理解为一个像素点,大家都知道,像素点这个东西我们无法来描述它有多大,但我们知道点的个数,有几个像素点,但无法描述说有多大的像素点。

说这么多,这两者的关系到底是什么?其实我们只要知道pt每一个单位的长度对应几个px就可以了。1pt 可以有 1px 构成,也可以有2个、3个,从上面的图我们知道。

iPhone 3里 1pt 等于 1px

iPhone 4/4S、iPhone 5/5S/5C、iPhone 6/6S ,1pt 等于 2px

iPhone Plus系列的 1pt 等于 3px

所以,为什么手机模拟器的iPhone 6的分辨率是375,而设计图一般都是750。模拟器375分辨率对应375pt,而设计图的750分辨率对应的是750px。


2、在微信小程序中怎么去适配不同的机型 ?

根据 iPhone 6 的物理像素 750 x 1334 为视觉稿进行设计,而在微信小程序中使用 rpx 为单位

iPhone 6 下的  px 、 rpx 、pt 关系:1px = 1rpx = 0.5pt

iPhone plus系列下的 px 、 rpx 、pt 关系:1px = 0.6rpx ≈ 0.3pt

在小程序中使用 rpx,小程序会自动根据不同的分辨率去转换对应的像素点,而 px 单位是不会去转换的(因为px是视觉单位,你看到的是多少永远是多少,不会因机型不一样而改变)。