小程序中的rpx单位

在移动端日常开发,多使用rem单位,因为它能够很好的解决屏幕适应问题。

在小程序中,小程序框架提供了rpx(responsive pixel),可以根据屏幕宽度进行自适应。rpx其实是微信对于rem的一种应用的规定,或者说一种设计的方案

如上图中,

pt为逻辑分辨率,与屏幕尺寸有关, 可以理解为长度单位;

px为物理分辨率,与屏幕尺寸无关,用于描述像素点的多少;

小程序框架规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375(pt),共有750个物理像素(px),那么750rpx = 375pt = 750px。所以iPhone6下:1px = 1rpx =0.5pt;

建议设计稿建议以iPhone6的分辨率(750x1334px)为基准。这样的情况下1rpx=1px。

另:不是所有单位都适合rpx,有一些比如字体标题不需要自调整就不实用rpx。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,469评论 5 80
  • (一)调机 今天调机调了半个小时。 先是和听力师沟通保留哪个程序,我想了想,在和听力师交涉之后,感觉还是保留后面那...
    爱吃虾的雅典娜阅读 359评论 0 3
  • 小程序推荐使用的长度单位是rpx,看看官方说明:rpx(responsive pixel): 可以根据屏幕宽度进行...
    liwuwuzhi阅读 1,466评论 0 0
  • 软件开发的架构 1、C/S架构C/S即:Client与Server ,中文意思:客户端与服务器端架构,这种架构也是...
    whenitsallover阅读 149评论 0 0