微信小程序 iphone6 和 iphone6plus 如何设置rpx单位,通俗易懂的方法

SolomonXie 发布于2019-08-21 11:35 / 567人阅读

摘要：换算在设计图中，设计图大小为如果一个宽度为换算所以在微信小程序中，直接填写即可。是在不同屏幕下可以适配的，所以使用单位只要在一种设计图下适配，都可以在不同设备大小自己调节大小通过以上例子看出做小程序时，需要设计图为以手机大小设计方案最佳

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手机大小设计方案最佳！！

云服务器 GPU云服务器如何拥有自己的微信小程序微信小程序如何快速微信小程序如何开发如何创作微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86891.html

CSS尺寸单位介绍

摘要：前端开发过程中，尺寸单位是我们必须用到的，下面我们对中常见的几种尺寸单位进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念以下概念读起来可能有些晦涩，如果看不懂也没关系像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及...

AlanKeene 2019-08-23 15:53 评论0 收藏0
CSS尺寸单位介绍

摘要：前端开发过程中，尺寸单位是我们必须用到的，下面我们对中常见的几种尺寸单位进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念以下概念读起来可能有些晦涩，如果看不懂也没关系像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及...

zhaot 2019-08-30 15:56 评论0 收藏0
CSS尺寸单位介绍

摘要：前端开发过程中，尺寸单位是我们必须用到的，下面我们对中常见的几种尺寸单位进行逐一介绍在这之前，需要先对几个概念进行普及介绍基本概念以下概念读起来可能有些晦涩，如果看不懂也没关系像素它不是自然界的物理长度，指基本原色素及其灰度的基本编码。前端开发过程中，尺寸单位是我们必须用到的，下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前，需要先对几个概念进行普及...

2shou 2019-08-02 14:29 评论0 收藏0
理解小程序

摘要：小程序的布局信息微信小程序中使用作为长度单位，可以根据屏幕宽度进行自适应。运行环境普通都是执行在浏览器的宿主环境，浏览器提供等对象但是小程序是运行在微信上下文中的，没有和。小程序坚持着无需下载、触手可及、用完即走的设计理念和价值观，帮助用户缩短完成任务的时间。下面从以下几点进行总结。总结是参考三清水老师的小册子，推荐大家去购买。写的很棒。 1. 小程序能做什么，不能做什么? sho...

dmlllll 2019-08-23 12:11 评论0 收藏0