WeChat 如何理解rpx

Unsplash

在小程序样式表中,我们绝大多数的长度单位都设置成 rpx,而不是我们常见的 px,使用 rpx 小程序会自动在不同的分辨率下进行转换,而使用 px 为单位则不会

UI 同学给我们的视觉稿一般是以 i6 为标准进行设计的,i6 的逻辑像素为 375*667 pt,视觉稿为物理像素 750*1334 px,其转换关系为 1px = 0.5 pt = 1rpx,我们在以往的移动端前端开发中,往往将视觉稿里的元素尺寸除以 2 而得到实际的元素尺寸,但在小程序中,可以按 1:1 的转换关系来设置元素尺寸,并能在不同分辨率设备下,保持一定的比例关系,下图是 100px 和 200rpx 的头像在 i6 和 iPad 设备上的显示效果

100px-200rpx-i6

100px-200rpx-ipad

或许其他同学会有疑问,为什么 i6 分辨率是 375(逻辑分辨率 pt),而视觉稿一般给 750(物理分辨率 px)?这是因为逻辑分辨率 pt 是按内容尺寸计算的长度单位,其大小和屏幕的尺寸有关;而物理分辨率 px 是按像素点计算的单位,跟屏幕大小没有关系,两者之间的关系为:一个 pt 对应多少个 px,即一个长度里能够包含多少个 px

我们无法形容一个点有多大,但能通过点的个数来形容,在 i6 设备下,1 个 pt 包含了 2 个 px,如果不是以 i6 的标准进行做图,视觉稿与 rpx, px 的转换关系就不是整数倍了,计算起来也比较麻烦,下图是小程序模拟器给出的每种机型的分辨率,需要注意的是,这里的分辨率指的是逻辑分辨率 pt,以 i6 为例,水平方向有 375 个逻辑像素点,而竖直方向有 667 个逻辑像素点,每个逻辑像素点包含 2 个物理像素点

机型分辨率

最后,在其他机型中,我们看到每个逻辑像素点包括 3 个或者更多的物理像素点,那是不是包含的物理像素点越多,我们所看到的画面就会越清晰?答案是不会,因为 Retina 屏已经达到我们肉眼所能分辨出来的极限

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript 基础

    JavaScript 是一种轻量级,解释型的,有着函数优先 (First-class Function) 的编程语言,虽然它是作为开发 WEB 页面的脚本语言而...

    Nian糕
  • WeChat 文章列表页面(一)

    本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问...

    Nian糕
  • jQuery 动态绑定

    这是在项目过程中所遇到的一个问题,给 JS 动态生成的元素绑定事件失效,代码如下所示:

    Nian糕
  • 微信小程序--粉丝列表 样式实现

    Kindear
  • 使用featureCounts进行定量分析

    featuresCounts软件用于统计基因/转录本上mapping的reads数,也就是用于raw count定量。该软件不仅支持基因/转录本的定量,也支持e...

    生信修炼手册
  • 引导式超高分辨率

    引导式超分辨率是用于多个计算机视觉任务的统一框架。它输入信息是含有某个目标物体的低分辨率源图像(例如,使用飞行时间相机获取的透视深度)和一个来自不同区域的高分辨...

    小白学视觉
  • 原 一次tensorflow的尝试

    霡霂
  • ROS2编程基础课程--库

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    zhangrelay
  • 图片相似性匹配中的特征提取方法综述

    stevenmiao(苗捷),2016年7月博士毕业于华南理工大学,应届毕业加入TEG信息安全部。八年计算机视觉算法经验,博士期间主要研究面向视频的特征提取和内...

    TEG云端专业号
  • No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?

    以前用MyEclipse,现在用eclipse配置maven后,运行run install.报错: 1 [ERROR] No compiler is provi...

    Ryan-Miao

扫码关注云+社区

领取腾讯云代金券