谈谈像素以及微信小程序的 rpx
谈谈像素以及微信小程序的 rpx
前言
最近在负责有赞的某个业务的微信小程序开发,这是我第一次着手微信小程序的开发,这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx
,即 responsive pixel。
根据官方的描述:
rpx(responsive pixel), 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
平时我们一般会用 em
或者 rem
来做屏幕适配,而在微信小程序中,可以方便的借助 rpx
来完成这项工作。
那么怎么理解 rpx
,还有它与 px
之间什么关系?什么是物理像素?
为了更好理解 rpx
,我打算聊聊下面的一些概念:
- 像素 (Pixel)
- PPI (Pixels per inch 每英尺像素)
- DPR (Device pixel ratio)
像素
像素,英文单词:pixel,是英语单词 「picture」 的简写 「pix」,加上 「element」 的简写 「el」,合成的词汇,表示「图像元素」的意思。
一个像素只能表达一个色块,是显示的最小的一个单元。
而在我们写代码的时候,可以把像素分为两种:
- 物理像素 Physical pixels
- 逻辑像素 Logical pixels
物理像素
也被称为设备像素 (Device independent pixels),即设备在出厂的时候就已经固定了像素。
我们来看一下 iPhone6 (左图) 与 iPhone6 plus (右图) 的官方显示屏的规格说明:
iPhone6 是 1334px x 750px
的像素分辨率,意思是当手机竖放的时候,横向有 750 个物理像素,纵向有 1334 个物理像素。
逻辑像素
在 CSS 中也被称为 CSS 像素 (CSS pixels),是为 Web 开发者创造的,在 CSS 和 JavaScript 中使用的一个抽象的层,每一个 CSS 声明和几乎所有的 Javascript 属性都使用 CSS 像素。
例如我们平时使用 Chrome 的设备调试工具的时候,iPhone6 是高 667px
,宽是 375px
,与苹果官方的 1334px x 750px
,长宽分别少了 2 倍,那么面积就少了 4 倍。这就是经常说的 Retina 屏幕用四个(物理)像素表示一个(逻辑)像素。
PPI
Pixels per inch,每英寸像素,也被称为像素密度,意思是一英寸中有多少个物理像素。
其中 1英寸 (inch) = 2.54厘米 (cm)。
回顾一下上面的 iPhone6 和 iPhone6 plus 的官方规格说明图,其中有 ppi
这一项,iPhone6 是 326ppi
,iphone6 plus 是 401ppi
。
PPI 怎么算出来的?
要计算显示器的每英寸像素值,首先要确定屏幕的尺寸和分辨率。
PPI 计算公式:
其中,
- dp (device pixel) 为屏幕对角线的分辨率
- wp (width pixel) 为屏幕横向分辨率
- hp (height piexl) 为屏幕纵向分辨率
- di (device inch) 为屏幕对角线的长度(单位为英寸)。
以 iPhone6 为例:
四舍五入那便是 326ppi
了。
物理像素有多大?
「物理像素」是有特定长度的,这取决于 ppi 值。
那么如何求出一个设备的物理像素的长度?
因为绝大多数设备的物理像素都是方形的,我们可以假设当前设备的像素是方形的。
那么,
- iPhone6 中每个像素长度:1inch / 326ppi ≈ 0.003 inch = 0.0762mm
- iPhone6 plus 中每个像素长度:1inch / 401ppi ≈ 0.002 inch = 0.0508mm
可以看出 iPhone6 plus 的屏幕制作工艺更加精细。
因为像素越小,那么单位面积内像素点就越多,显示的效果人眼就越难看出毛刺。
用来显示一份图像的像素越多,效果就越接近现实。
和物理像素不同,「逻辑像素」没有特定的物理长度的,只是表示显示设备中最小的显示单元,优秀的显示设备完全可以把显示单元做的更加小,已达到更好的显示效果。
DPR
Device Pixel Ratio,设备像素比。
在早先的移动设备中,并没有 DPR 的概念。随着技术的发展,移动设备的屏幕像素密度越来越高。
从 iPhone4 开始,苹果公司推出了所谓的 Retina 视网膜屏幕。之所以叫做视网膜屏幕,是因为屏幕的 PPI 太高,人的视网膜无法分辨出屏幕上的像素点。
iPhone4 的分辨率提高了一倍,但屏幕尺寸却没有变化,这意味着同样大小的屏幕上,像素多了一倍,于是 dpr = 2
。
在 Chrome 浏览器可以通过以下代码获取设备的 DPR:
let dpr = window.devicePixelRatio;
而通过下面的代码可以获取设备的逻辑像素:
let logicalHeight = screen.height;
let logicalWidth = screen.width;
那么很多人看到这里,就会认为:物理像素 = 逻辑像素 * dpr
但实际情况并不是这样,
留意一下 iPhone6 plus 的物理像素和逻辑像素:
- 物理像素:
1080px x 1920px
- 逻辑像素:
414px x 736px
而官方声称 iPhone6 plus 的 dpr = 3
,按理应该是:
414px x 736px
→ 乘以 3 倍 dpr →1242px x 2208px
那么 iPhone6 plus 只有 1080px x 1920px
,怎么去展示 1241px x 2208px
的分辨率呢?
原来 iPhone6 plus 对逻辑像素做了缩小处理,以适应物理像素,也就是
1241px x 2208px
除以 115%
,得到 1080px x 1920px
。
换句话来说,本来 iPhone6 plus 的 dpr = 2.6
,但是通过虚拟技术把物理像素放大 115% ,以达到 dpr = 3
的效果。
所以说是假 3 倍 dpr,其实我们开发和设计的时候也不用管这个,当作它就是 3 倍 dpr 就好了。
回到 rpx
根据官方给出的 rpx 换算 px 的实例:
三款机器的逻辑像素:
- iPhone5 :
320px x 568px
- iPhone6 :
375px x 667px
- iPhone6 plus :
414px x 736px
rpx 转换成 px 是需要乘以一个系数的:
px = rpx * n
其中系数 n,是跟着设备改变的:
- iPhone5:
n = 2.34
- iPhone6:
n = 2
- iPhone6 plus:
n = 1.81
所以 rpx 只是定义一个绝对值 750 宽度,然后简单的根据不同设备的逻辑像素来进行 rpx 到 px 的换算。
精明的观众可能发现了, rpx 压根就不需要关心 DPR 和 PPI 的概念。
呃,其实我就是在理解 rpx 的过程中,拦不住思维的发散,了解了一大堆概念,然后顺道给你们分享一下罢了。
https://segmentfault.com/a/1190000009497004
谈谈像素以及微信小程序的 rpx相关推荐
- CSS中大小单位px,em,rem 以及微信小程序的rpx
CSS中可以定义大小的单位有四种px,em,rem 以及微信小程序的rpx . 2017-05-25 px - 像素(Pixel).相对长度单位.像素px是相对于屏幕分辨率而言的. em - 相对长度 ...
- 【微信小程序】rpx
新手博主多多支持 文章目录 前言 一.rpx介绍 二.rpx原理 1.原理 2.单位换算 总结 前言 例随着互联网的不断发展,小程序这门技术也越来越重要,很多人都开启了学习微信小程序的学习,本文就介绍 ...
- 微信小程序中rpx和px的区别?
大家用微信开发,肯定会接触到一个新的像素单位"rpx". 那么"rpx"跟之前我们进行网页开发的"px"相比较有什么区别呢? 查看微信文档, ...
- java程序的最小程序单位_微信小程序中rpx与rem单位使用
原作者: 小小小 来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 如果看完上面几篇文章,我们开始进入正题吧~~ 一.rem的使用 1) js中导入下面这 ...
- 微信小程序中rpx与rem单位使用
原作者: 小小小 来自: 授权地址 本文讲解rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起: 微信小程序官方文档 web app变革之rem rpx单位官方文档 rpx单位基础 ...
- WebStorm 支持微信小程序的 rpx 单位
webstorm在写微信小程序代码的时候,rpx单位会警告,并且格式化rpx单位与数值之间会有一个空格. 解决方法: 在plugins中搜索wechat mini program support,安装 ...
- 谈谈我对微信小程序的理解
由于毕设涉及到微信小程序开发,学习几天有感 开发微信小程序目前我学习到了两种方式: 微信小程序开发工具 uni-app(HBulider X) 前者可以配合npm(vant weapp)使用 后者可以 ...
- 微信小程序之rpx尺寸单位及换算方法
rpx (responsive pixel):响应单位 rpx 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx rpx 是小程序中使用的屏幕自适应的尺寸单位 可以通过 rpx 设置元素和字体的大 ...
- 微信小程序:rpx和px转换
技术背景 我们知道小程序里面是不可以直接进行DOM操作的,所以卤煮通常以下面的方式设置元素的尺寸: 所以有时候就涉及到px和rpx之间的转换~~ 需求解决 先看看官方的回答: 通过小程序内置方法**g ...
最新文章
- 美国新桥投资集团(Newbridge Capital) [from baike]
- ssl *** 思科支持设备型号
- 统计学出身但编程一般,该选择数据分析还是挖掘算法?
- python图例重复显示_matplotlib中的legend()——用于显示图例
- (51)FPGA状态机描述(四段式)
- 小米金融:与涉案的“山东小米金融服务外包有限公司”无关系
- 爬虫项目——BS4练手(1)
- 万稞pw80线切割编程软件_Sodick 沙迪克慢走丝线切割机床,工件摆斜不校边加工步骤...
- 利用计算机模拟,科学家试图利用计算机模拟整个宇宙的演化
- 《JavaScript高级程序设计》目录笔记
- 操作系统漏洞检测与利用
- 坚守自主创新,璞华HawkEye IETM系统惠及国计民生
- 群晖 docker 版 transmission 安装 Web UI
- Android 10.0 媒体音乐,铃声,闹钟,通知等设置默认音量为最大音量80%
- “书”送未来|敏涵控股集团向夏邑一中捐赠图书
- 从页面获取form表单提交的数据
- vue 前端生成二维码,并转换为图片
- 老毛桃重启计算机没反应,老毛桃怎么用
- 数字图像隐藏图像的两种算法及实现代码
- 【软件简史】怎样理解 Alan Kay 曾在1984 年写道:“我们希望像以前编辑文档一样编辑我们的工具” 这句话 —— LLM 将如何影响软件的创建?
热门文章
- AI电话机器人有没有效果?具体的功能都有哪些?
- 高级PHP工程师必备的编码技巧及思维(收藏)
- python斗地主出牌算法_斗地主之用蚁群算法整理牌型:如何进行牌力估计
- python画五角星和六角星程序_python画五角星和六角星程序
- 遇到”xxxx.app已损坏,打不开,解决方案
- 为什么是四次挥手不是三次挥手
- vue 项目获取QQ音乐歌单数据
- Windows内存清理工具实现——从现象到本质
- unity3d发布webgl手机测试流程
- java SSM项目基础(day 5)[实现用户添加功能(注册)]