屏幕尺寸就是实际的物理尺寸。

分辨率(pt),是逻辑分辨率,pt的大小只和屏幕尺寸有关,简单可以理解为长度和视觉单位。

分辨率(px),是物理分辨率,单位是像素点,和屏幕尺寸没有关系。

微信开发者工具上iphone6尺寸是375,指的是逻辑分辨率,设计图常常给出的750px是物理分辨率。1个pt可以有1个px构成,也可以是2个,还可以有3个甚至更多(其实@2x已经是人眼的极限了,再增加也不会改变清晰度)。如果是以iphone6的尺寸开发的话,那么设计图给的物理像素除以2,才是写在代码里的逻辑分辨率。这样很麻烦,针对不同的机型,添加图片需要更改各自的宽高。

所以需要做到不同分辨率设备的自适应。

以iphone6的物理像素750X1334为视觉稿进行设计,而在小程序中使用rpx为单位,1px=1rpx=0.5pt。使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会。

rpx在微信小程序中,相当于一个标准,在不同的分辨率机型下,代表不同的实际长度。

所以今后在设计页面布局图的时候,尽量以iphone6,750px屏幕尺寸为标准设计,这样比较方便,不会有太大问题。(如果以iPhone6 plus为标准设计的话,1px = 0.6rpx,换算很麻烦,而iPhone6 1px=1rpx,很方便,1:1)。

PS:不是所有的单位都适合用rpx。

比如一些文字,如果用rpx自适应,那可能在小机型上,字会很小看不清。

初尝微信小程序3-移动设备的分辨率与rpx的更多相关文章

  1. 初尝微信小程序开发与实践

    这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...

  2. 初尝微信小程序2-基本框架

    基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑    描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...

  3. 初尝微信小程序1-特点

    微信小程序特点:1.不需要下载安装即可使用 2.用户用完即走,不用关心是否安装太多应用 3.应用将无处不在,随时可用 适合开发的小程序类型:1.简单的用完即走的应用 2.低频的应用 3.性能要求不高的 ...

  4. 初尝微信小程序2-Swiper组件、导航栏标题配置

    swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...

  5. 微信小程序之----获取设备信息

    1. 获取系统信息        wx.getSystemInfo(OBJECT)        wx.getSystemInfoSync() 同步获取系统信息                回调常用 ...

  6. 微信小程序初体验与DEMO分享

    前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝 ...

  7. 微信小程序开发技巧及填坑记录

    以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...

  8. 微信小程序开发常见问题分析

    距离微信小程序内测版发布已经有十几天的时间了,网上对微信小程序的讨论也异常火爆,从发布到现在微信小程序一直占领着各种技术论坛的头条,当然各种平台也对微信小程序有新闻报道,毕竟腾讯在国内影响力还是很大的 ...

  9. 微信小程序之最简单的Demo设计使用

    这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢... ...

随机推荐

  1. POJ2151-Check the difficulty of problems

    题目链接:点击打开链接 Check the difficulty of problems Time Limit: 2000MS   Memory Limit: 65536K Total Submiss ...

  2. NYOJ542-试制品

    题目链接:点击打开链接 试 制 品 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描述 ZZ大学的Dr.Kong最近发现实验室的很多试制品都已经用完.由于项目经费有限,为了节省 ...

  3. JS事件冒泡机制和兼容性添加事件

    本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...

  4. Javascript专题(三)b.各种轮播和细节分析--上下滚动轮播

    这一次,我们用原生JS实现上下滚动方式的轮播.顺带学习一下用JS来创建HTML元素. 上一次写的轮播是淡入淡出效果的,相对来说其实是比较简单的. github源码: 上下轮播源码-github A. ...

  5. jQuery中ready和load的区别

    <span style="white-space:pre">        </span>//document ready $(document).read ...

  6. chapter03

    import scala.collection.mutable.ArrayBuffer /** * Created by EX-CHENZECHAO001 on 2018-03-29. */class ...

  7. Xpath定位绝密版本

    xpath的作用就是两个字“定位”, 运用各种方法进行快速准确的定位,推荐两个非常有用的的firefox工具:firebug和xpath checker 在 XPath 中, 有七种类型的节点:元素. ...

  8. JVM虚拟机 - Class类文件结构

    概述 Class文件是一组以8位字节为基础单位的二进制流,各个数据项目严格按照顺序紧凑地排列在Class文件之中,中间没有添加任何分隔符,这使得整个Class文件中存储的内容几乎都是程序运行的必要数据 ...

  9. 进程的基础理论、并发(multiprocessing模块)

    一.粘包优化方案 之前我们解决粘包的方式是用struct模块来制作一个报头,但是这个解决的方案是有漏洞的,当我们需要传送的文件大于2g时将会报错.所以我们今天将用json来制作报头. from soc ...

  10. vue+element-ui实现cookie登录

    //效果 //login.vue <template> <div> <el-form :model="ruleForm" :rules="r ...