专栏首页知晓程序为什么小程序能适配不同机型?因为微信做了这个

为什么小程序能适配不同机型?因为微信做了这个

我们都知道,小程序是一个跨系统的平台。这就意味着,小程序会在不同的设备上运行,但不同设备的分辨率会有差异。

在小程序中,如何在分辨率不同的设备上保证视觉元素的正常显示?这就需要名为 rpx 的动态尺寸单位。

本期,知晓程序(微信号 zxcx0101)为大家带来小程序 rpx 单位全解析,希望能够帮助你解决有关 rpx 的一切疑问。

为什么需要动态单位和 rpx?

在显示屏上,每一个画面都是由无数的点阵形成的。这个点阵中,每一个点叫做像素,就是 pixel(缩写为 px)。

上面的那句话,对于很多人来说都是常识。

但是,随着 Retina 屏幕(即「视网膜屏」)的推出和高分屏的普及,1 px 所能代表的实际长度并非是一成不变的

对于跨平台、跨设备的应用来说,单纯使用 px 并不能满足需要。因为,这很难保证小程序的元素,能在不同设备上正常显示——同样 px 尺寸的元素,在高分屏上显示会明显要比在低分屏显得更小。

因此,我们需要一个动态的长度单位。这个单位通过对不同屏幕的分辨率进行调整和适配,保证相同元素在不同屏幕上的展示是正常的。

苹果和 Google 对此都有相应的措施:

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

微信也为小程序提供了一个动态单位解决方案:它就是 responsive pixel(动态像素),简称 rpx

Pixel 与 rpx、dp 如何换算呢?

了解动态单位是怎么来的以后,我们下一步就该学习如何在 pxrpxdp 之间进行换算了。

动态单位与 px 换算的基本概念是:选择一个分辨率作为基准,在基准分辨率中,一个像素点显示有多长,在其他屏幕上会显示同样长度。

例如,dp 与 px 换算公式是:dp = px * (目标设备 dpi 分辨率 / 160)

但微信小程序的 rpx 换算方式,会与其他动态单位的换算方法有些出入。微信官方提供的换算方式更「傻瓜」一些:rpx = px * (目标设备宽 px 值 / 750)

举个例子:

  • 目标设备的宽度如果是 375px,按照 750rpx 进行换算,则等于 1rpx = 0.5px
  • 目标设备的宽度如果是 1125px,换算后 1rpx = 1.5px

想想是不是有些不太对劲?没错,如果将微信小程序放到平板电脑上运行,屏幕的宽度 px 值有可能会变化(横竖屏、分屏模式等等)。这时候,再以宽度为基准,就会出现元素显示不正确的问题。

从这一点可以看出,微信团队目前并不希望将小程序扩展到手机以外的设备中。因此,开发者暂时可以专注于提高小程序在手机上的体验,无需担心多尺寸屏幕带来的适配问题。

那能不能直接让 rpxdp 进行互换呢?当然不能!

dp 是以屏幕分辨率为基准的动态单位,而 rpx 是以长度为基准的动态单位。就像「米」和「平方厘米」不能互换一样,dprpx 两者也是不能直接进行互换的,除非微信官方将 rpx 设定为分辨率基准而非长度基准。

设计师该怎么做?

由于微信使用了 rpx 动态单位,设计稿的尺寸单位也推荐使用 rpx

那么问题来了,如果要改用 rpx 单位,以什么尺寸的屏幕作为设计稿标准会比较合适呢?

在微信官方的文档中,我们看到这样一句话:

在 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。

在将设计稿转交给程序员之前,设计师需要清楚地描述设计稿尺寸和单位换算标准等,以便程序员快速实现界面效果。

如果想让你的小程序,在不同尺寸的机型上都能够完美显示,那就好好消化这篇文章吧。

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更知小程序的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-08

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 星巴克小程序新玩法!比微信群抢红包还刺激

    没错,一杯咖啡,便可以让我们这帮「咸鱼」,迅速切换到「我爱工作,工作使我快乐」的清醒模式。

    知晓君
  • 星巴克推出小程序了!这次不卖咖啡,而是发「好人卡」

    4 月 6 日,全球最大的咖啡连锁品牌星巴克上线了一款小程序,取名为「星巴克用星说」。

    知晓君
  • 「大众点评点餐」小程序开发经验 03:事件联动

    李超,美团点评前端开发工程师,2 年 web 开发经验,现在是美团点评点餐团队的一员。

    知晓君
  • 最优方向法(MOD)

    \min\sum\limits_i\|x_i\|_0 \quad \mathrm{s.t.} \; \|Y-DX\|^2_F \leq \varepsilon

    卡尔曼和玻尔兹曼谁曼
  • elasticsearch文档索引API(一)

    上篇文章向读者介绍了Elasticsearch中文档的基本读写操作流程,以及分片、副本等的工作流程,本文我们来看看Elasticsearch文档索引API。

    江南一点雨
  • [Leetcode][动态规划]相关题目汇总/分析/总结

    后端技术漫谈
  • CSS常用布局实现05-圣杯布局和双飞翼布局

    其实对于三列布局的实现,之前网上使用最多的还是这两种。它们有一个共同的优点,就是可以使主内容优先加载。当然,如果不考虑兼容,flex和grid还是优先推荐的。

    love丁酥酥
  • RabbitMQ服务端的安装和使用

    工作接近3年,一直有使用RabbitMQ作为服务间解耦的中间件,但是一直没有做一系列学习和总结,这里决心做一个系列总结一下RabbitMQ的运维、使用以及生产中...

    Throwable
  • unity自定义创建资源包(代码片段)

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

    bering
  • 软硬件分离趋势及开放网络发展

    1. 前言 一直以来,网络设备给人的感觉就一个或大或小的铁盒子,其貌不扬,让人猜不透里面到底是啥。而这种情况将有所改观,在OCP等开放组织、众多芯片商、ODM商...

    鹅厂网事

扫码关注云+社区

领取腾讯云代金券