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. Leaflet:LatLng、LatLngBounds、Point、Bounds、Icon

    LatLng 代表一个有着确定经纬度坐标的地理点. 1.用例 var latlng = L.latlng(50.5,30.5); 所有Leaflet的方法中接收的LatLng参数均可以用数组[ ]或者 ...

  2. C#集合,字典的运用

    三个题解释所有 using System;using System.Collections.Generic;using System.Linq;using System.Text;using Syst ...

  3. 『现学现忘』Docker相关概念 — 2、云计算的服务模式

    目录 1.最底层的,就是IaaS 2.再往上,就是PaaS 3.继续往上,就是SaaS 4.IaaS.SaaS.PaaS三者之间的关系 上一篇文章详细介绍了什么是云计算: 云是一种服务,可以像使用水. ...

  4. JS-购物车

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Yaconf-配置管理扩展

    1.下载yaconf安装包git clone https://github.com/laruence/yaconf.git2.目录切换至yaconf,编译生成so 文件(找到你的phpize位置) / ...

  6. CentOS Linux服务器 挂载硬盘

    1.通过fdisk -l 查看目前的硬盘信息,默认是从sda开始排,增加第二块硬盘的时候,会显示sdb,以此类推,我的是vda,vdb,以自己实际的为主,下面以sda,sdb 讲解 2.添加硬盘3.重 ...

  7. BBS项目分布搭建三(个人站点时间归档补充,实现侧边栏跳转、无线级分类、实现文章详情页展示功能)

    BBS项目分布搭建三(个人站点时间归档补充,) 1. 个人站点时间归档 """ settings.py设置最好更改以下: LANGUAGE_CODE = 'zh-hans ...

  8. 31 面向对象编程 接口 普通类:只有具体实现 声明类的关键字是class,声明接口关键字是interface 接口的作用

    接口 概念 普通类:只有具体实现 抽象类:具体实现和规范(抽象方法)都有! 接口:只有规范!自己无法写方法!专业的约束!约束和实现分离:面向接口编程~ 接口就是规范,定义的是一组规则,体现了现实世界中 ...

  9. jdbc action 接口示例

    package com.gylhaut.action; import java.sql.SQLException;import java.util.ArrayList;import java.util ...

  10. ssm配置推荐

    1.JDK 1.8 2.Mysql 5.7 3.Maven 3.6.1