小程序 设计尺寸
来源:互联网 发布:关于网络流行语的论文 编辑:程序博客网 时间:2024/04/30 11:23
做移动app开发都不可避免屏幕的适配,那么小程序里的屏幕怎么适配呢,小程序官网里说规定屏幕宽为750rpx,链接
意思是说不管什么屏幕,宽度都是750rpx,我们设计的时候都以宽为750rpx来设计,那么高度呢?
显然如果能知道高宽比我们就能知道高度了,高度=750rpx*高宽比
API里提供同步方法wx.getSystemInfoSync() 异步方法wx.getSystemInfo() 获得高宽信息
var sysinfo=wx.getSystemInfoSync();console.log(sysinfo);在开发者工具下输出为
发现
windowWidth:375 为750的一半,
windowHeight:627 ,乘以2的话为1254,而iphone6像素其实是1334,所以这个windowHeight为除去顶部navigationBar之后(以下称为窗口)的高度
375的单位为px(注意不是物理像素),小程序里canvas和wxss里用的px都是这个px
那么如果我们要设置一个view宽占满手机要怎么做,可以设置width:750rpx ,or width:windowWidth px ,注意并不是所有手机宽都是375px,这个数值是会随手机改变的。
我们可以保存px和rpx之间转换的变量
var sysinfo=wx.getSystemInfoSync();if(sysinfo){ this.globalData.sysinfo=sysinfo; var width=sysinfo.windowWidth; this.globalData.px2rpx=750/width; this.globalData.rpx2px=width/750;}这样当我们需要把px转为rpx或者rpx转为px就很方便了
0 0
- 小程序 设计尺寸
- stl 设计的小程序
- 抽奖小程序的设计
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 网页设计标准尺寸
- 移动端H5页面遇到的问题总结
- mvn -v报java.lang.UnsupportedClassVersionError: org/apache/maven/cli/MavenCli
- JS抓取动态页面小程序
- Android事件总线OTTO用法的快速入门
- Jedis使用API
- 小程序 设计尺寸
- [编程题] 构造回文(基础DP)
- Greenplum学习
- PostgreSQL监控指标
- Docker基础命令集合
- 寒假学习之STM32(2)----时钟
- Web系统开发构架再思考-前后端的完全分离
- Springfox2.6.1+SpringMVC+Swagger2配置手记(2)
- canvas图文合成