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

分辨率(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. mybatis复习01

    1.mybatis的历史: mybatis是apache的一个开源项目,2010被google收购,转移到google code. mybatis是一个优秀的持久层框架,对jdbc操作进行了封装,是操 ...

  2. AT2166 Rotate 3x3

    传送门 这个题网上有两种做法,一种是树状数组的,还有一种是暴力模拟的,暴力模拟显然不够优美,所以我用的树状数组 显然可以从初状态推到目标状态,我们也可以考虑倒推回去 首先可以容易发现每列的数字是不变的 ...

  3. idea中使用Git对项目进行版本控制

  4. POJ3974 Palindrome Manacher 最长回文子串模板

    这道题可以$O(nlogn)$,当然也可以$O(n)$做啦$qwq$ $O(nlogn)$的思路是枚举每个回文中心,通过哈希预处理出前缀和后缀哈希值备用,然后二分回文串的长度,具体的就是判断在长度范围 ...

  5. LeetCode 260 Single Number III 数组中除了两个数外,其他的数都出现了两次,找出这两个只出现一次的数

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  6. Hyperspace Travel

    https://www.hackerrank.com/contests/infinitum16-firsttimer/challenges/hyperspace-travel 给出n个点,是一个m维坐 ...

  7. Jmeter-性能测试工具

    0.概念和备注 //基本使用流程 测试计划-->右键 添加-> Threads(Users) --> 选择线程组 -->线程组-->右键 添加 --> Sample ...

  8. spring boot注入error,Consider defining a bean of type 'xxx' in your configuration问题解决方案

    经常出现这问题一定是非spring生态圈的@标签 没被spring引入,如mybatis等 因为在默认情况下只能扫描与控制器在同一个包下以及其子包下的@Component注解,以及能将指定注解的类自动 ...

  9. Ionic 解决gradle下载慢的问题

    问题 使用Ioinc添加安卓平台或者编译的时候,提示gradle-XXX-all.zip下载,此进度缓慢. 解决 下载gradle对应的zip文件. 参考资源:http://services.grad ...

  10. 禁止form重复提交

    $("form").submit(function () { console.log("提交了"); $("input:submit").a ...