我們在做微信小程式的開發時，經常會遇到在寫樣式表的時候發現用PX的效果不太理想的情況。日常開發中，我們常用rem、em來做響應式佈局的畫素單位，他們都是相對單位。rem相對於文件的根元素，em相對於父元素。但是在微信小程式的官方文件用rpx來做響應式佈局單位！那什麼是RPX,應該如何設定呢？今天我們就來好好了解一下。

[color=rgb(44,]
rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。 

開始之前，我們先扯一扯畫素、物理長度、裝置獨立畫素、裝置獨立畫素比都是些啥？

【畫素】：它不是自然界的物理長度，指基本原色素及其灰度的基本編碼。

【物理畫素】：它是顯示器（電腦、手機螢幕）最小的物理顯示單位，每個物理畫素由顏色值和亮度值組成。是不是有點眼熟？我們要記住物理畫素指的是顯示器上最小的點。

【裝置獨立畫素】：它又稱密度無關畫素，劃重點——密度無關，是計算機程式實際處理的虛擬畫素（如css的px），由相關關係轉化為裝置畫素。這個相關關係就是指下面要介紹的——裝置畫素比

【裝置畫素比】：裝置畫素比 = 物理畫素 / 裝置獨立畫素，單位是dpr！

還是沒有看懂？沒有關係，我們從圖片上來看一下移動裝置的解析度和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後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。

@import "common.wxss";  

@import "temp/loadBottomTemp/loadBottomTemp.wxss";  

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：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

<view class="normal_view" />  

class="container-row buydes-center-des-select"  

4.選擇器 
目前支援的選擇器有： 

5.全域性樣式與區域性樣式 
定義在 app.wxss 中的樣式為全域性樣式，作用於每一個頁面。在 page 的 wxss 檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

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的常用設定

<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">  

第一個meta標籤表示：強制讓文件的寬度(viewport寬度)與裝置的寬度保持1:1,並且文件最大的寬度比例是1.0,且不允許使用者點選螢幕放大瀏覽； 
width - viewport的寬度 height - viewport的高度 [device-width(裝置的物理畫素寬) | pixel_value] pixel_value是具體的畫素值 
案例:

 <meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

initial-scale - 初始的縮放比例 
minimum-scale - 允許使用者縮放到的最小比例 
maximum-scale - 允許使用者縮放到的最大比例 
user-scalable - 使用者是否可以手動縮放,這裡有的資料寫成no有的寫成0 
第二個meta標籤是iphone裝置中的safari私有meta標籤,它表示：允許全屏模式瀏覽； 
第三個meta標籤也是iphone的私有標籤,它指定的iphone中safari頂端的狀態條的樣式； 
在web app應用下狀態條（螢幕頂部條）的顏色； 
預設值為default（白色）,可以定為black（黑色）和black-translucent（灰色半透明）。 
注意：若值為“black-translucent”將會佔據頁面px位置,浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。 
第四個meta標籤表示：告訴裝置忽略將頁面中的數字識別為電話號碼。

HTML5 META標籤常用設定參考資料點選開啟連結點選開啟連結 點選開啟連結

3.裝置物理畫素(裝置畫素),裝置邏輯畫素(裝置獨立畫素),程式碼CSS畫素,裝置畫素比 
裝置物理解析度(device pixels):物理解析度也叫裝置畫素,物理解析度是LED顯示屏顯示的影象原始解析度

裝置邏輯解析度(device independent pixels):人對於物體真實尺寸的認知(螢幕大小),設計使用邏輯畫素來思考介面

程式碼CSS畫素:CSS畫素是Web程式設計的概念,獨立於裝置的用於邏輯上衡量畫素的單位,也就是說我們在做網頁時用到的CSS畫素單位是抽象的,而不是實際存在的

iphone 6為例(裝置畫素比是2): 
裝置物理畫素(裝置畫素):750x1334 
裝置邏輯畫素(裝置獨立畫素):375x667 
程式碼CSS畫素:375x667 
device-width(裝置的物理畫素寬):375 (1 CSS PX = 2 裝置的物理畫素)

**案例：**iphone 6s 的物理畫素是750x1334,JS中window.innerWidth就是獲取裝置的物理畫素,為什麼window.innerWidth獲取的值是375而不是750呢? 
因為window.innerWidth的值是用CSS pixels來表示的,而iphone 6s的裝置畫素比是2,1 CSS PX = 2 裝置的物理畫素,所以window.innerWidth獲取的值是375px,而不是750px(750px = 375px * 裝置畫素比)

在1倍率的螢幕上: 1 CSS PX = 1 裝置的物理畫素 
在2倍率的螢幕上: 1 CSS PX = 2 裝置的物理畫素 
裝置畫素比=裝置畫素/裝置獨立畫素(物理畫素/邏輯畫素) 
圖片實際畫素 = 圖片邏輯畫素/裝置畫素比

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）  

2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）  

3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）  

以iPhone 5s為例,螢幕的解析度是640×1136,倍率是2。瀏覽器會認為螢幕的解析度是320×568,仍然是基準倍率的尺寸。 
所以在製作頁面時,只需要按照基準倍率來就行了。無論什麼樣的螢幕,倍率是多少,都按邏輯畫素尺寸來設計和開發頁面。 
只不過在準備資源圖的時候,需要準備2倍大小的圖,通過程式碼把它縮成1倍大小顯示,才能保證清晰。