初尝微信小程序3-移动设备的分辨率与rpx
屏幕尺寸就是实际的物理尺寸。
分辨率(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的更多相关文章
- 初尝微信小程序开发与实践
这可能是一个java程序员最不务正业的一次分享了. 小程序的火热相信不用我多说了,年初的时候老婆去浦东某达面试,甚至都被问有没有小程序测试经验.俨然小程序成为了互联网公司自PC,WAP,安卓,IOS之 ...
- 初尝微信小程序2-基本框架
基本框架: .wxml :页面骨架 .wxss :页面样式 .js :页面逻辑 描述一些行为 .json :页面配置 创建一个小程序之后,app.js,app.json,app.wxss是必须的 ...
- 初尝微信小程序1-特点
微信小程序特点:1.不需要下载安装即可使用 2.用户用完即走,不用关心是否安装太多应用 3.应用将无处不在,随时可用 适合开发的小程序类型:1.简单的用完即走的应用 2.低频的应用 3.性能要求不高的 ...
- 初尝微信小程序2-Swiper组件、导航栏标题配置
swiper 滑块视图容器. 很多网页的首页都会有一个滚动的图片模块,比如天猫超市首页,滚动着很多优惠活动的图片,用来介绍优惠内容,以及供用户点击快速跳转到相应页面. Swiper不仅可以滚动图片,也 ...
- 微信小程序之----获取设备信息
1. 获取系统信息 wx.getSystemInfo(OBJECT) wx.getSystemInfoSync() 同步获取系统信息 回调常用 ...
- 微信小程序初体验与DEMO分享
前言 前一段时间微信公布小程序,瞬间引来了大量的关注.博主的公司也将其定为目标之一,遂派本菜为先头兵(踩坑侠). 这次开发了一个比较完整的DEMO,模仿自某个APP首页,由于保护隐私的目的我把数据拷贝 ...
- 微信小程序开发技巧及填坑记录
以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add pag ...
- 微信小程序开发常见问题分析
距离微信小程序内测版发布已经有十几天的时间了,网上对微信小程序的讨论也异常火爆,从发布到现在微信小程序一直占领着各种技术论坛的头条,当然各种平台也对微信小程序有新闻报道,毕竟腾讯在国内影响力还是很大的 ...
- 微信小程序之最简单的Demo设计使用
这个小Demo,代码量不多:导航样式.View.Text.点击.JS交互的使用,主要是理解每个后缀文件的功能,然后才能更好的使用开发.......(下面代码和源代码没差别,实在想要的请留言,谢谢... ...
随机推荐
- giihub上的关于js的43道题目
参考 https://github.com/lydiahallie/javascript-questions
- STP-17-对抗单向链路问题
单向链路问题是指链路上的两条传输路径中,有一条出现了问题,但并不是两条同时出现问题.这可能是因为线缆错误.切断了一条光纤线缆.拔掉了一根管线.GBIC问题,或其他问题.因为STP会监控入向BPDU,以 ...
- 纯干货:Linux抓包命令集锦
/******************************************************************************************* 版权声明* 本 ...
- spring boot test MockBean
使用spring boot , MockBean @RunWith(SpringRunner.class) @SpringBootTest(classes = Application.class) p ...
- AJAX (分页)
<!-- 企业新闻列表开始,图尺寸550*310,如果没图,则在li上加on --> <div class="common-box new-box"> &l ...
- OpenStack local.conf
# Sample ``local.conf`` for user-configurable variables in ``stack.sh`` # NOTE: Copy this file to th ...
- IDEA使用汇总
1. 常用配置 File --> Settings (Ctrl + Alt + S) 1).提示不区分大小写: Editor-->Genereal-->Code Completion ...
- 再谈Drupal 7.X的性能优化运行速度问题
D6升级D7之后,性能着实让人头大,不妨参考下面文章,另外站内搜索DOOOOR里其他优化文章,中西医结合吧.其中CDN和BOOST效果还可以,其他的没试过. 1,服务器 Web服务器建议,推荐使用HA ...
- ElasticSearch安装(以Docker的方式)
拉取docker镜像: docker pull docker.elastic.co/elasticsearch/elasticsearch:6.1.1 命令行方式启动 测试环境 :docker ...
- .Net Core+mySqlSugar的一些稍复杂操作
介绍一些我尝试的mysqlSugar的数据库操作 修改密码 var status = db.Update<Users>(new { password = user.password }, ...