微信小程序 iphone6 和 iphone6plus 如何设置rpx单位,通俗易懂的方法
pt:屏幕物理像素(屏幕实际宽度像素) px:屏幕分辨率 pt和px关系:iphone6plus
ppi密度高,1pt里有3px,iphone6 1pt里有2px。iphone6宽度 (物理像素) :375pt,1pt含有2px, 分辨率(设计图) 750px。
iphone6plus宽度(物理像素):414pt,1pt含有3px,分辨率(设计图)1252px。
rpx换算:
换算公式:750/屏幕实际宽度(pt)
iphone6plus(@3x) px换算rpx:
750/414=1.8115942028985508rpx
在设计图中,设计图大小为1252px;
如果一个宽度为30px换算rpx:
30/3*1.8115942028985508=8.115942028985508;
所以在微信小程序中,直接填写8.115942028985508rpx即可。
iphone6(@2x) px换算 rpx:
750/375=2rpx;
在设计图中,设计图大小为750px;
如果一个宽度为30px换算rpx:
30/2*2=30rpx
所以在微信小程序中,直接填写30rpx即可。
rpx是在不同屏幕下可以适配的,所以使用rpx单位只要在一种设计图下适配,都可以在不同设备大小自己调节大小
通过以上例子看出做小程序时,需要设计图为以iphone6手机大小设计方案最佳!!
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hjb1ji2h1ib
微信小程序 iphone6 和 iphone6plus 如何设置rpx单位,通俗易懂的方法的更多相关文章
- 微信小程序中input标签高度设置
如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...
- 微信小程序顶部(navigationBar)设置为透明
我记得在微信小程序中导航栏的颜色可以在app.json. window里面添加navigationBarBackgroundColor属性,但是颜色只能为纯色.不能使用rgb,或者rgba的色号. ...
- 微信小程序开发:背景图片设置
本文链接:https://blog.csdn.net/michael_f2008/article/details/86543134开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错: ...
- 微信小程序tabBar 不显示底部菜单的原因和解决方法
1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...
- 微信小程序-修改单选框和复选框大小的方法
方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...
- 微信小程序丨将溢出的文本用省略号代替的方法
下面进入正题,有关于将溢出的文本用省略号代替的方法,不知道什么原因,我的程序用传统的代码无法解决: .text{ white-space: nowrap; overflow: hidden; text ...
- 2018年1月12日--微信小程序----出错报告(40kb的原因)---并解决方法
一. 报错的原因是因为,图片的文件太大了,已经超过了40kb...不能超过40kb. 在这里查看图片文件的大小:
- 微信小程序开发 [06] 一些补充的知识点
0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...
- 快速上手微信小程序-快递100
2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模 ...
随机推荐
- WinRar:你需要从上一压缩卷启动解压命令以便解压
大文件被分解成许多个小的RAR文件,并按顺序排列好,解压时只需解压第一个RAR文件即可顺利解压所有文件,如果不按顺序解压就会出现上述问题,导致解压完一个子文件候无法解压剩下的文件
- 在Intellij IDEA中添加JUnit单元测试
Intellij IDEA中添加JUnit单元测试 目录 Intellij IDEA中添加JUnit单元测试 下载jar包 在Intellij IDEA项目中添加jar包 下载插件并进行设置 创建存放 ...
- Chaoter07 面向对象 (Object)
目录 Chapter07 面向对象 7.1 类与对象 7.1.1 对象在内存中的存在形式 (重要) 7.1.2 属性 / 成员变量 7.1.3 类与对象的内存分配机制(重要) Object03 Obj ...
- 路由的query参数(传参)
路由组件不会在组件里面放自己组件标签. 案例使用嵌套组件的,但是在Message组件下新增了组件Detail.vue index.html //引入bootstrap.css <link rel ...
- tensorflow源码解析系列文章索引
文章索引 framework解析 resource allocator tensor op node kernel graph device function shape_inference 拾遗 c ...
- 《手把手教你》系列基础篇(七十六)-java+ selenium自动化测试-框架设计基础-TestNG实现DDT - 下篇(详解教程)
1.简介 今天这一篇宏哥主要是结合实际工作中将遇到的测试场景和前边两篇学习的知识结合起来给大家讲解和分享一下,希望以后大家在以后遇到其他的测试场景也可以将自己的所学的知识应用到测试场景中. 2.测试场 ...
- CF1327F题解
首先第一步,位运算拆位.变为一个区间的 \(And\) 为 \(0\) 或 \(1\). 如果 \(And\) 为 \(1\),那么所有数都需要为 \(1\),否则为 \(0\). 我们把所有可能为 ...
- @Autowired @Qualifier @Resource
@Autowired 用于对Bean的属性变量,属性的setter()方法及构造方法进行标注,配合对应的注解处理器完成Bean的自动装配工作.默认按照Bean的类型进行装配. @Resource 其作 ...
- 开启路由器的TCP拦截
TCP拦截即TCP intercept,大多数的路由器平台都引用了该功能,其主要作用就是防止SYN泛洪攻击.SYN攻击利用的是TCP的三次握手机制,攻击端利用伪造的IP地址向被攻击端发出请求,而被攻击 ...
- js中的函数嵌套和闭包
小编已经有一段时间没有更新文章了,最近一直在考虑接下来要更新什么内容.接下来,小编会围绕以下三个方面更新文章.实际项目中遇到的问题和解决方案.Vue源码解析.代码重构.关于数据可视化.小编也会按照这个 ...