小程序开发--移动端分辨率与rpx
首先说一个很有意思的问题:一块720p的屏幕和1080p的屏幕那个大?
这个问题很有代表性,如果手机竖着放,720p=720px*1280px,而1080p=1080px*1920px;那么在宽度上,前者是720个像素,后者是1080个像素,后者一定比前者大吗?
答案是否定的,后者不一定比前者大,还可能和前者一样大,甚至比前者小。
这里需要搞清楚一个概念,像素点只有个数的问题,没有大小的问题。那什么才和大小有关呢?是逻辑分辨率(pt),我们来看一张表格:
| 
 型号  | 
 屏幕尺寸(inch)  | 
 逻辑分辨率(point)  | 
 render  | 
 物理分辨率(pixel)  | 
 像素密度(PPI)  | 
| 
 iPhone3GS  | 
 3.5  | 
 320 * 480  | 
 @1x  | 
 320 * 480  | 
 163  | 
| 
 iPhone4/4s  | 
 3.5  | 
 320 * 480  | 
 @2x  | 
 640 * 960  | 
 326  | 
| 
 iPhone5/5s  | 
 4  | 
 320 * 568  | 
 @2x  | 
 640 * 1136  | 
 326  | 
| 
 iPhone6/6s  | 
 4.7  | 
 375 * 667  | 
 @2x  | 
 750 * 1334  | 
 326  | 
| 
 iPhone6Plus/6s Plus  | 
 5.5  | 
 414 * 736  | 
 @3x  | 
 1242 * 2208  | 
 401  | 
其实我们可以这么理解:屏幕尺寸决定逻辑分辨率,它们之间是有对应关系的,但是这个换算关系涉及到屏幕的栅格渲染,较为复杂。所谓逻辑分辨率,就是一个物理长度的单位。而这里的render指的是每个pt中包含几个px。比如iPhone3GS和iPhone4s,实际尺寸都是3.5英寸,即都是320pt*480pt,但是由于在4s中每个pt可以包含2个px了,所以显示更加细腻了。
一句话就讲明白了:逻辑分辨率决定屏幕尺寸,物理分辨率指向显示细腻程度。
为什么是指向呢?因为细腻程度(ppi)是这样计算的:
  
这样就很明白了。
那么小程序开发中,这一块最有意思的是,它在设计rpx这玩意的时候,完完全全就是以iPhone6为模板的。在且只在iPhone6中,1px=1rpx=0.5pt。
也就是说,对于一张设计稿,只要物理分辨率和iPhone6保持一致,为750px*1334px,按照1:1的换算关系在小程序中写成rpx,那么这个布局和比例在任何设备显示都是一致的。
因为使用rpx,小程序会自动在不同分辨率的设备中进行自适应转换,而使用px就不会。
小程序开发--移动端分辨率与rpx的更多相关文章
- 微信小程序开发之多图片上传+服务端接收
		
前言: 业务需求,这次需要做一个小程序同时选中三张图片一起上传到服务端,后端使用的.NET WEBAPI接收数据保存. 使用技术: 在这章中将会使用到微信小程序wx.uploadFile(Object ...
 - Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)
		
1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...
 - [转]微信小程序开发(二)图片上传+服务端接收
		
本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk71988 ...
 - 微信小程序开发 [06] 一些补充的知识点
		
0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...
 - 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
		
本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58212d0fa7a7574c4f4cc3c5 作者:peggy 小程序概述 1 ...
 - 微信小程序开发02-小程序基本介绍
		
前言 前面我们研究了下微信小程序的执行流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解小程序还需要做具体的项目,于是我们将原来那套还算复杂的业务拿出来: [组件化开发]前端进阶篇之如何编写可维 ...
 - 微信小程序开发环境搭建
		
关注,QQ群,微信应用号社区 511389428 微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个 ...
 - 微信小程序开发中的二三事之网易云信IMSDK DEMO
		
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
 - 微信小程序开发:学习笔记[3]——WXSS样式
		
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
 
随机推荐
- Kmeanns图片压缩
			
from sklearn.datasets import load_sample_image#先导入数据包 china = load_sample_image("china.jpg" ...
 - C++ 中利用 Opencv 得到不规则的ROI 区域(已知不规则区域)
			
因为需要,之前写了一个利用mask 得到不规则ROI 区域的程序. 现在需要修改,发现自己都看不懂是怎么做的了.. 所以把它整理下来. 首先利用 鼠标可以得到 你想要的不规则区域的 顶点信息.具体这里 ...
 - css2d 3d
			
2D转换 1.rotate() 旋转 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...
 - arm linux和windows 使用tftp传文件
			
一.在windows 安装tftp客户端 链接:https://pan.baidu.com/s/1sxNciX337DObVmGJmCxICw 提取码:hzvj 在客户端新建一个tftp文件夹 二.关 ...
 - 移动端canvas文字图片合成并生成图片(canvas宽度自适应移动端屏幕)
			
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
 - Eclipse的application.properties文件输出中文成unicode编码
			
今天添application.properties时,无法输入中文,输入的中文直接变成了unicode的编码形式.原因是Eclipse的Spring Properties文件的默认编码为iso-885 ...
 - kubernets基础
			
1.定义和功能. 1.1定义:kubernets解释为舵手或者飞行员,以Borg为主衍生出. 1.2功能:自动装箱,自我修复,水平扩展,服务发现和负载均衡,自动发布和回滚. 密钥和配置管理,存储编排, ...
 - 虚拟机找不到/mnt/hgfs挂载目录——debian与 vmware
			
如果在安装好 VMware Tools 并在设置里面设定好共享目录之后仍然找不到 /mnt/hgfs 默认挂载目录,那么尝试以下步骤: 1. 确认VMware Tools 和共享目录设定已经完成: 2 ...
 - iptables log日志记录功能扩展应用:iptables自动配置临时访问策略,任意公网登录服务器
			
一.修改日志记录: 1. 修改配置文件: vi /etc/rsyslog.conf 添加以下内容 #iptables log kern.=notice /var/log/iptables.log 2. ...
 - windows下安装nodejs以及python2502,2503解决方案
			
1. 2053和2052为什么会出现出现这个提示的时候,是在程序安装步骤 到达copy new file的时候 进入下一步进行报错,可以推测出应该是软件包在安装的时候,解压缩部署核心文件的时候出错. ...