收藏
评论

小程序中 rpx、px、pt 单位之间的比例测量

为表达方便,下面都以屏幕宽度为基准度量值


首先,屏幕宽度 = 750 rpx


接下来关于 px,这个不同手机可能不同,开发者可调用 wx.getSystemInfo 接口,取里面的 windowWidthscreenWidth(这两个值一般来说是相同的),取到的值就是屏幕宽度的 px 值


最后关于 pt,我找了 Android 和 iOS 的几台手机分别测试了一下,统计出在各个机型上都满足 1 px = 0.75 pt


比如我的魅族p6p,屏幕宽度 = 750 rpx = 360 px = 270 pt

再比如 iPhone 7 Plus,屏幕宽度 = 750 rpx = 414 px = 310.5 pt


这个就和小程序设计规范里认为的 1 px = 0.5 pt 不一致了,做设计稿和标注时需要注意这一点

收藏

3 个评论

  • 西赛德李
    西赛德李
    2019-10-14

    如果在项目中全部使用 rpx 的话,在 iPad 上页面元素就会变得很大,包括按钮、文字、图片等。这一点知乎的小程序适配得很好,不知道他们是不是全都用 px 来的

    2019-10-14
    赞同
    回复
  • 箩灬卟
    箩灬卟
    2018-07-31

    rpx是基于当前屏幕宽度与750的比值算出来的,属于动态的。会根据不同屏幕进行换算。所以做响应式比较好用。

    2018-07-31
    赞同
    回复
  • 初心不敢忘
    初心不敢忘
    2018-06-14

    全部用rpx呢

    2018-06-14
    赞同
    回复 2
    • 西赛德李
      西赛德李
      2018-06-15
      我的项目里就是全用 rpx 的,比较好控制
      2018-06-15
      回复
    • weinuo1124
      weinuo1124
      2018-06-19

      建议全部统一rpx

      2018-06-19
      回复
登录 后发表内容