详细说明如何在不同的移动设备上小程序设置rpx单位

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

我们在做微信小程序的开发时，经常会遇到在写样式表的时候发现用PX的效果不太理想的情况。日常开发中，我们常用rem、em来做响应式布局的像素单位，他们都是相对单位。rem相对于文档的根元素，em相对于父元素。但是在微信小程序的官方文档用rpx来做响应式布局单位！那什么是RPX,应该如何设置呢？今天我们就来好好了解一下。

详解如何在不同的移动设备上小程序设置rpx单位

[color=rgb(44,]
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

详解如何在不同的移动设备上小程序设置rpx单位

说实话，一开始没看懂。rpx到底是个啥？又该如何理解“750rpx = 375px = 750物理像素”这句话呢？

开始之前，我们先扯一扯像素、物理长度、设备独立像素、设备独立像素比都是些啥？

【像素】：它不是自然界的物理长度，指基本原色素及其灰度的基本编码。

【物理像素】：它是显示器（电脑、手机屏幕）最小的物理显示单位，每个物理像素由颜色值和亮度值组成。是不是有点眼熟？我们要记住物理像素指的是显示器上最小的点。

【设备独立像素】：它又称密度无关像素，划重点——密度无关，是计算机程序实际处理的虚拟像素（如css的px），由相关关系转化为设备像素。这个相关关系就是指下面要介绍的——设备像素比

【设备像素比】：设备像素比 = 物理像素 / 设备独立像素，单位是dpr！

还是没有看懂？没有关系，我们从图片上来看一下移动设备的分辨率和rpx的关系：

详解如何在不同的移动设备上小程序设置rpx单位

以iPhone6为例：

已知，1. 设备宽高 375 * 667，在这里我们可以看做是css中的px（密度无关像素）；2. retina屏幕的dpr为2。

求 iPhone6 的物理像素是多少？

送分题啊，同学们！

根据公式，我们计算出iPhone 6 的物理像素为 750 * 1334

结论：

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。

在普通屏幕下，1个css像素对应 1个物理像素(1:1)。在retina 屏幕下，1个css像素对应 2*2个物理像素(1:4)。

【位图像素】：一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。觉得复杂？你只需要记住1px表示一个图片最小的点。不信？我们来用PS放大一张图片，可以看到图片被拆分成无数个点，但无论你如何放大那些小点，他们都不能再次被拆分了，因为他们已经是像素级别的点了，已经是最小的了。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。

所以，在宽高375 * 667，dpr为2 的 iPhone 6中完美显示200*300(css pixel)img标签，图片的尺寸应该为多少呢？答案是：400 * 600。

这就是我们针对iPhone 6 的设计稿的尺寸基于 750*1334 来设计的目的了。

回到正题.......rpx是啥？

有了上面的做铺垫，我们知道了对于iPhone6 来说， 1rpx = 1物理像素，1rpx = 0.5px;

如果不是iPhone 6 呢？

1rpx = window.innerWidth/750。

1px = 1rpx * dpr。

2.样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<font style="color:rgb(44, 62, 80)"><font style="background-color:rgb(249, 249, 245)"><font face="&quot;"><font style="font-size:16px">@import "common.wxss";  
@import "temp/loadBottomTemp/loadBottomTemp.wxss";  </font></font></font></font>

3.内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
(1)style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

//动态样式 <view style="color:{{color}};" /> style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx"; //静态样式 style="color: #1083E5;font-size: 48rpx;font-weight:bold;"

(2)class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<font style="color:rgb(44, 62, 80)"><font style="background-color:rgb(249, 249, 245)"><font face="&quot;"><font style="font-size:16px"><view class="normal_view" /> 
class="container-row buydes-center-des-select"  </font></font></font></font>4.选择器 
目前支持的选择器有： 
5.全局样式与局部样式 
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

二：设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解
1.viewport(可视区域大小)的概念理解和知识积累 
(1)移动设备上的viewport就是设备的屏幕上能用来显示网页的那一块区域,就是浏览器上用来显示网页的那部分区域 
(2)viewport不一定是浏览器或者设备屏幕可视区域的大小,可能比可视区域大,也可能比可视区域小,因为viewport的大小是可以设置的 
(3)大部分移动设备默认的viewport都是980px,多数情况下要大于device-width,因此一般都要在移动端重置viewport,让width=device-width 
(4)通过JavaScript获取viewport的方式：document.documentElement.clientWidth,获取device-width的方式window.innerWidth,获取设备像素比window.devicePixelRatio 
(5)苹果从iPhone4开始引进了Retina屏幕,一个CSS像素可以表示多个物理像素,并且在页面缩放到其他比例时候,也可以做到CSS 的1px表示多个device pixels 
(6)前端开发中的CSS pixels和设备分辨率所讲的resolution pixels 无关,开发中的CSS pixels和设备像素比有关 
2.移动端的HTML5开发META的常用设置
<font style="color:rgb(44, 62, 80)"><font style="background-color:rgb(249, 249, 245)"><font face="&quot;"><font style="font-size:16px"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 
<meta content="yes" name="apple-mobile-web-app-capable"> 
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 
<meta content="telephone=no" name="format-detection">  </font></font></font></font>第一个meta标签表示：强制让文档的宽度(viewport宽度)与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览； 
width - viewport的宽度 height - viewport的高度 [device-width(设备的物理像素宽)   
关键词：详细说明如何在不同的移动设备上小程序设置rpx单位