找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 › 教程频道› 小程序开发 › 查看内容

谈谈像素以及微信小程序的 rpx

作者:模板之家 2018-4-18 11:13 5773人关注

前言 最近在负责有赞的某个业务的微信小程序开发 , 这是我第一次着手微信小程序的开发 , 这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位

前言

最近在负责有赞的某个业务的微信小程序开发,这是我第一次着手微信小程序的开发,这个过程中发现微信小程序所定义的一套 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,我打算聊聊下面的一些概念:

  1. 像素 (Pixel)
  2. PPI (Pixels per inch 每英尺像素)
  3. DPR (Device pixel ratio)

像素

像素,英文单词:pixel,是英语单词 「picture」的简写 「pix」



路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)