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单位,通俗易懂的方法的更多相关文章

  1. 微信小程序中input标签高度设置

    如果没有设置高度所以显示的是控件自身的高度. 微信小程序input控件原始设置: 上图发现: 我只覆盖了官方input的height,而没有覆盖min-height; .query input{ bo ...

  2. 微信小程序顶部(navigationBar)设置为透明

    我记得在微信小程序中导航栏的颜色可以在app.json.  window里面添加navigationBarBackgroundColor属性,但是颜色只能为纯色.不能使用rgb,或者rgba的色号. ...

  3. 微信小程序开发:背景图片设置

    本文链接:https://blog.csdn.net/michael_f2008/article/details/86543134开发微信小程序时,不能直接在wxss文件里引用本地图片,运行时会报错: ...

  4. 微信小程序tabBar 不显示底部菜单的原因和解决方法

    1,书写,正确书写时tabBar,不要写成tabbar!!! 2,当创建新工程时,app.json中Pages配置是这样的 ,,[图1], 注意:微信小程序里面的json文件时不能注释的,图中只是给读 ...

  5. 微信小程序-修改单选框和复选框大小的方法

    方法有两种: 一:采用css的zoom属性 zoom缩放会将元素保持在左上角,并且会有毛边,可能会稍稍改变元素原来的形状. 二:采用css3的transform:scale属性 zoom缩放会将元素保 ...

  6. 微信小程序丨将溢出的文本用省略号代替的方法

    下面进入正题,有关于将溢出的文本用省略号代替的方法,不知道什么原因,我的程序用传统的代码无法解决: .text{ white-space: nowrap; overflow: hidden; text ...

  7. 2018年1月12日--微信小程序----出错报告(40kb的原因)---并解决方法

    一. 报错的原因是因为,图片的文件太大了,已经超过了40kb...不能超过40kb. 在这里查看图片文件的大小:

  8. 微信小程序开发 [06] 一些补充的知识点

    0.写在前面的话 前几章的内容串联起来,基本上已经能写比较基础的小程序页面逻辑了,当然,wxml和wxss的我并没有写,因为前端我也并不擅长.这个章节,准备随便叨叨,然后补充一些之前没有提到的基础知识 ...

  9. 快速上手微信小程序-快递100

    2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模 ...

随机推荐

  1. Qt:QReadWriteLock

    0.说明 QReadWriteLock类提供了读写锁. 读写锁是一种保护那些可以读写的资源的同步工具,如果有多个线程同时要进行读操作,但是有一个线程想要写入,那么所有其他线程都会等待直到这个写线程完成 ...

  2. WPS二级标题链接到一级标题

    WPS二级标题链接到一级标题,即2后出现2.1 2.2而不是1.3 1.4什么的 样式中的编号什么的都不用动,默认即可,关键在于这些多级标题是否选择了同一个编号方式 WPS中,只需要将它们的编号选择为 ...

  3. 三、Java入门

    Java入门 Java的特性和优势 特性 ​ 简单 ​ 面对对象 ​ 可移植性 优势 ​ 性能高 ​ 分布式(跨平台:Write Once .Run Anywhere) ​ 动态性(反射) ​ 多线程 ...

  4. linux文本处理grep

    grep grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具 ...

  5. 【转载】SQL实例大全

    from:http://blog.csdn.net/basycia/article/details/52134279 OR from:http://www.cnblogs.com/yubinfeng/ ...

  6. DB门面-数据查询

    1.1.1 查询所有数据 $selData = DB::table('article')->get(); 1.1.2 单条件查询 #DB::table('表名')->where('字段', ...

  7. laravel 框架登录 实际操作

    //登录中间件 Route::group(['middleware'=>'checkage'],function (){ Route::get('/mou/list','MouControlle ...

  8. sql面试 case /union all

    1.sum(case when results='胜' then 1 else 0 end) as '胜' 要求查询出结果: sql语句实现: select date, sum(case when r ...

  9. 微信小程序结合原生JS实现电商模板(一)

    前几天遇到一个朋友求助,实现购物车的相关功能,一时心血来潮,想着抽空搭建一个小程序电商平台(虽然网上有很多,但还是自己撸一遍才是王道),所以在工作之余整了一个仓库,今天提交了第一次代码,已经满足了朋友 ...

  10. ARM中断与架构知识 精简知识点

    目录 一.ARM系统的异常与中断 二.CPU模式与寄存器 1.ARM CPU模式 2.ARM CPU state,两种指令集 3.ARM CPU寄存器: 引申介绍一下存储空间中的数据存放 4.ARM三 ...