我們在做微信小程序的開發(fā)時(shí)，經(jīng)常會遇到在寫樣式表的時(shí)候發(fā)現(xiàn)用PX的效果不太理想的情況。日常開發(fā)中，我們常用rem、em來做響應(yīng)式布局的像素單位，他們都是相對單位。rem相對于文檔的根元素，em相對于父元素。但是在微信小程序的官方文檔用rpx來做響應(yīng)式布局單位！那什么是RPX,應(yīng)該如何設(shè)置呢？今天我們就來好好了解一下。

[color=rgb(44,]
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

說實(shí)話，一開始沒看懂。rpx到底是個(gè)啥？又該如何理解“750rpx = 375px = 750物理像素”這句話呢？

開始之前，我們先扯一扯像素、物理長度、設(shè)備獨(dú)立像素、設(shè)備獨(dú)立像素比都是些啥？

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

【物理像素】：它是顯示器（電腦、手機(jī)屏幕）最小的物理顯示單位，每個(gè)物理像素由顏色值和亮度值組成。是不是有點(diǎn)眼熟？我們要記住物理像素指的是顯示器上最小的點(diǎn)。

【設(shè)備獨(dú)立像素】：它又稱密度無關(guān)像素，劃重點(diǎn)——密度無關(guān)，是計(jì)算機(jī)程序?qū)嶋H處理的虛擬像素（如css的px），由相關(guān)關(guān)系轉(zhuǎn)化為設(shè)備像素。這個(gè)相關(guān)關(guān)系就是指下面要介紹的——設(shè)備像素比

【設(shè)備像素比】：設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素，單位是dpr！

還是沒有看懂？沒有關(guān)系，我們從圖片上來看一下移動設(shè)備的分辨率和rpx的關(guān)系：

以iPhone6為例：

已知，1. 設(shè)備寬高 375 * 667，在這里我們可以看做是css中的px（密度無關(guān)像素）；2. retina屏幕的dpr為2。

求 iPhone6 的物理像素是多少？

送分題啊，同學(xué)們！

根據(jù)公式，我們計(jì)算出iPhone 6 的物理像素為 750 * 1334

結(jié)論：

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小(物理尺寸)是一致的，不同的是1個(gè)css像素所對應(yīng)的物理像素個(gè)數(shù)是不一致的。

在普通屏幕下，1個(gè)css像素 對應(yīng) 1個(gè)物理像素(1:1)。 在retina 屏幕下，1個(gè)css像素對應(yīng) 2*2個(gè)物理像素(1:4)。

【位圖像素】：一個(gè)位圖像素是柵格圖像(如：png, jpg, gif等)最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含著一些自身的顯示信息(如：顯示位置，顏色值，透明度等)。覺得復(fù)雜？你只需要記住1px表示一個(gè)圖片最小的點(diǎn)。不信？我們來用PS放大一張圖片，可以看到圖片被拆分成無數(shù)個(gè)點(diǎn)，但無論你如何放大那些小點(diǎn)，他們都不能再次被拆分了，因?yàn)樗麄円呀?jīng)是像素級別的點(diǎn)了，已經(jīng)是最小的了。

理論上，1個(gè)位圖像素對應(yīng)于1個(gè)物理像素，圖片才能得到完美清晰的展示。

所以，在寬高375 * 667，dpr為2 的 iPhone 6中完美顯示200*300(css pixel)img標(biāo)簽，圖片的尺寸應(yīng)該為多少呢？答案是：400 * 600。

這就是我們針對iPhone 6 的設(shè)計(jì)稿的尺寸基于 750*1334 來設(shè)計(jì)的目的了。

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

有了上面的做鋪墊，我們知道了對于iPhone6 來說， 1rpx = 1物理像素，1rpx = 0.5px;

如果不是iPhone 6 呢？

1rpx = window.innerWidth/750。

1px = 1rpx * dpr。

2.樣式導(dǎo)入
使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。

[AppleScript] 純文本查看 復(fù)制代碼

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

3.內(nèi)聯(lián)樣式
框架組件上支持使用 style、class 屬性來控制組件的樣式。
(1)style：靜態(tài)的樣式統(tǒng)一寫到 class 中。style 接收動態(tài)的樣式，在運(yùn)行時(shí)會進(jìn)行解析，請盡量避免將靜態(tài)的樣式寫進(jìn) style 中，以免影響渲染速度。

[AppleScript] 純文本查看 復(fù)制代碼

//動態(tài)樣式  
  
style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx";  
//靜態(tài)樣式  
style="color: #1083E5;font-size: 48rpx;font-weight:bold;"

(2)class：用于指定樣式規(guī)則，其屬性值是樣式規(guī)則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

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

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

5.全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁面。在 page 的 wxss 文件中定義的樣式為局部樣式，只作用在對應(yīng)的頁面，并會覆蓋 app.wxss 中相同的選擇器。

1.viewport(可視區(qū)域大小)的概念理解和知識積累
(1)移動設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示網(wǎng)頁的那一塊區(qū)域,就是瀏覽器上用來顯示網(wǎng)頁的那部分區(qū)域
(2)viewport不一定是瀏覽器或者設(shè)備屏幕可視區(qū)域的大小,可能比可視區(qū)域大,也可能比可視區(qū)域小,因?yàn)関iewport的大小是可以設(shè)置的
(3)大部分移動設(shè)備默認(rèn)的viewport都是980px,多數(shù)情況下要大于device-width,因此一般都要在移動端重置viewport,讓width=device-width
(4)通過JavaScript獲取viewport的方式：document.documentElement.clientWidth,獲取device-width的方式window.innerWidth,獲取設(shè)備像素比window.devicePixelRatio
(5)蘋果從iPhone4開始引進(jìn)了Retina屏幕,一個(gè)CSS像素可以表示多個(gè)物理像素,并且在頁面縮放到其他比例時(shí)候,也可以做到CSS 的1px表示多個(gè)device pixels
(6)前端開發(fā)中的CSS pixels和設(shè)備分辨率所講的resolution pixels 無關(guān),開發(fā)中的CSS pixels和設(shè)備像素比有關(guān)

2.移動端的HTML5開發(fā)META的常用設(shè)置

第一個(gè)meta標(biāo)簽表示：強(qiáng)制讓文檔的寬度(viewport寬度)與設(shè)備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點(diǎn)擊屏幕放大瀏覽；
width - viewport的寬度 height - viewport的高度 [device-width(設(shè)備的物理像素寬) | pixel_value] pixel_value是具體的像素值
案例:

initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放,這里有的資料寫成no有的寫成0
第二個(gè)meta標(biāo)簽是iphone設(shè)備中的safari私有meta標(biāo)簽,它表示：允許全屏模式瀏覽；
第三個(gè)meta標(biāo)簽也是iphone的私有標(biāo)簽,它指定的iphone中safari頂端的狀態(tài)條的樣式；
在web app應(yīng)用下狀態(tài)條（屏幕頂部條）的顏色；
默認(rèn)值為default（白色）,可以定為black（黑色）和black-translucent（灰色半透明）。
注意：若值為“black-translucent”將會占據(jù)頁面px位置,浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch5的Retina屏幕為40px）。
第四個(gè)meta標(biāo)簽表示：告訴設(shè)備忽略將頁面中的數(shù)字識別為電話號碼。

HTML5 META標(biāo)簽常用設(shè)置參考資料點(diǎn)擊打開鏈接點(diǎn)擊打開鏈接 點(diǎn)擊打開鏈接

3.設(shè)備物理像素(設(shè)備像素),設(shè)備邏輯像素(設(shè)備獨(dú)立像素),代碼CSS像素,設(shè)備像素比
設(shè)備物理分辨率(device pixels):物理分辨率也叫設(shè)備像素,物理分辨率是LED顯示屏顯示的圖像原始分辨率

設(shè)備邏輯分辨率(device independent pixels):人對于物體真實(shí)尺寸的認(rèn)知(屏幕大小),設(shè)計(jì)使用邏輯像素來思考界面

代碼CSS像素:CSS像素是Web編程的概念,獨(dú)立于設(shè)備的用于邏輯上衡量像素的單位,也就是說我們在做網(wǎng)頁時(shí)用到的CSS像素單位是抽象的,而不是實(shí)際存在的

iphone 6為例(設(shè)備像素比是2):
設(shè)備物理像素(設(shè)備像素):750x1334
設(shè)備邏輯像素(設(shè)備獨(dú)立像素):375x667
代碼CSS像素:375x667
device-width(設(shè)備的物理像素寬):375 (1 CSS PX = 2 設(shè)備的物理像素)

**案例：**iphone 6s 的物理像素是750x1334,JS中window.innerWidth就是獲取設(shè)備的物理像素,為什么window.innerWidth獲取的值是375而不是750呢?
因?yàn)閣indow.innerWidth的值是用CSS pixels來表示的,而iphone 6s的設(shè)備像素比是2,1 CSS PX = 2 設(shè)備的物理像素,所以window.innerWidth獲取的值是375px,而不是750px(750px = 375px * 設(shè)備像素比)

在1倍率的屏幕上: 1 CSS PX = 1 設(shè)備的物理像素
在2倍率的屏幕上: 1 CSS PX = 2 設(shè)備的物理像素
設(shè)備像素比=設(shè)備像素/設(shè)備獨(dú)立像素(物理像素/邏輯像素)
圖片實(shí)際像素 = 圖片邏輯像素/設(shè)備像素比

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。瀏覽器會認(rèn)為屏幕的分辨率是320×568,仍然是基準(zhǔn)倍率的尺寸。
所以在制作頁面時(shí),只需要按照基準(zhǔn)倍率來就行了。無論什么樣的屏幕,倍率是多少,都按邏輯像素尺寸來設(shè)計(jì)和開發(fā)頁面。
只不過在準(zhǔn)備資源圖的時(shí)候,需要準(zhǔn)備2倍大小的圖,通過代碼把它縮成1倍大小顯示,才能保證清晰。