作者：預見(jian)才能遇(yu)見(jian)，來(lai)自原文地址

一：尺寸單位rpx和樣式使用詳解

1.尺寸單位 
rpx（responsive pixel）: 可以根據屏(ping)幕寬度進行自適(shi)應。規定屏(ping)幕寬為750rpx。如(ru)在 iPhone6 上(shang)，屏(ping)幕寬度為375px，共有750個物(wu)理像素(su)，則(ze)750rpx = 375px = 750物(wu)理像素(su)，1rpx = 0.5px = 1物(wu)理像素(su)。 

建議： 開發(fa)微(wei)信小程(cheng)序時設計師可以用 iPhone6 作為視覺(jue)稿的(de)標準。 

2.樣式導入 
 使用(yong)@import語句(ju)可(ke)以導入(ru)外聯(lian)樣式表，@import后跟需要導入(ru)的外聯(lian)樣式表的相對路(lu)徑(jing)，用(yong);表示語句(ju)結束。

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

3.內聯樣(yang)式(shi)  框架組件上支持使用 style、class 屬性(xing)來(lai)控制組件的(de)樣(yang)式(shi)。  (1)style：靜態(tai)(tai)的(de)樣(yang)式(shi)統一寫(xie)到 class 中。style 接收動態(tai)(tai)的(de)樣(yang)式(shi)，在運行(xing)時會進(jin)行(xing)解析，請盡量避免(mian)將靜態(tai)(tai)的(de)樣(yang)式(shi)寫(xie)進(jin) style 中，以免(mian)影響渲(xuan)染速(su)度。

1. //動態樣式
2. <view style="color:{{color}};" />
3. style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx";
4. //靜態樣式
5. style="color: #1083E5;font-size: 48rpx;font-weight:bold;"

(2)class：用(yong)于指定(ding)樣(yang)(yang)式規則(ze)，其屬性(xing)值(zhi)是樣(yang)(yang)式規則(ze)中類(lei)選擇(ze)器名(ming)(ming)(樣(yang)(yang)式類(lei)名(ming)(ming))的(de)集合，樣(yang)(yang)式類(lei)名(ming)(ming)不需要(yao)帶上.，樣(yang)(yang)式類(lei)名(ming)(ming)之間用(yong)空格分隔。

1. <view class="normal_view" />
2. class="container-row buydes-center-des-select"

4.選(xuan)擇(ze)器  目前支持的選(xuan)擇(ze)器有： ;

5.全局(ju)(ju)樣(yang)(yang)(yang)式(shi)與局(ju)(ju)部樣(yang)(yang)(yang)式(shi)  定(ding)義在(zai) app.wxss 中的樣(yang)(yang)(yang)式(shi)為(wei)全局(ju)(ju)樣(yang)(yang)(yang)式(shi)，作(zuo)用于每一個頁面(mian)。在(zai) page 的 wxss 文件(jian)中定(ding)義的樣(yang)(yang)(yang)式(shi)為(wei)局(ju)(ju)部樣(yang)(yang)(yang)式(shi)，只作(zuo)用在(zai)對應的頁面(mian)，并會(hui)覆蓋 app.wxss 中相同(tong)的選擇器。

二：設備物理像素(設備像素) 設備邏輯像素(設備獨立像素) 代碼CSS像素 設備像素比 viewport深入理解

1.viewport(可(ke)(ke)(ke)視(shi)區域(yu)(yu)大(da)小(xiao)(xiao))的(de)(de)(de)概念(nian)理(li)解(jie)和知識積累  (1)移(yi)動設(she)備(bei)上的(de)(de)(de)viewport就是(shi)設(she)備(bei)的(de)(de)(de)屏幕上能用(yong)來(lai)顯示(shi)(shi)網(wang)頁的(de)(de)(de)那(nei)一(yi)(yi)塊(kuai)區域(yu)(yu),就是(shi)瀏(liu)覽器(qi)上用(yong)來(lai)顯示(shi)(shi)網(wang)頁的(de)(de)(de)那(nei)部分區域(yu)(yu)  (2)viewport不一(yi)(yi)定(ding)是(shi)瀏(liu)覽器(qi)或者設(she)備(bei)屏幕可(ke)(ke)(ke)視(shi)區域(yu)(yu)的(de)(de)(de)大(da)小(xiao)(xiao),可(ke)(ke)(ke)能比(bi)(bi)可(ke)(ke)(ke)視(shi)區域(yu)(yu)大(da),也(ye)可(ke)(ke)(ke)能比(bi)(bi)可(ke)(ke)(ke)視(shi)區域(yu)(yu)小(xiao)(xiao),因為viewport的(de)(de)(de)大(da)小(xiao)(xiao)是(shi)可(ke)(ke)(ke)以設(she)置的(de)(de)(de)  (3)大(da)部分移(yi)動設(she)備(bei)默(mo)認的(de)(de)(de)viewport都是(shi)980px,多(duo)數(shu)情(qing)況(kuang)下要(yao)大(da)于device-width,因此一(yi)(yi)般都要(yao)在(zai)移(yi)動端重置viewport,讓width=device-width  (4)通過(guo)JavaScript獲(huo)取viewport的(de)(de)(de)方式：document.documentElement.clientWidth,獲(huo)取device-width的(de)(de)(de)方式window.innerWidth,獲(huo)取設(she)備(bei)像(xiang)素比(bi)(bi)window.devicePixelRatio  (5)蘋(pin)果從iPhone4開始引進了Retina屏幕,一(yi)(yi)個CSS像(xiang)素可(ke)(ke)(ke)以表(biao)示(shi)(shi)多(duo)個物理(li)像(xiang)素,并且在(zai)頁面縮放到其(qi)他(ta)比(bi)(bi)例時候,也(ye)可(ke)(ke)(ke)以做到CSS 的(de)(de)(de)1px表(biao)示(shi)(shi)多(duo)個device pixels  (6)前端開發(fa)中的(de)(de)(de)CSS pixels和設(she)備(bei)分辨率所講的(de)(de)(de)resolution pixels 無關,開發(fa)中的(de)(de)(de)CSS pixels和設(she)備(bei)像(xiang)素比(bi)(bi)有關  viewport的(de)(de)(de)深入理(li)解(jie):點(dian)擊打開鏈接

2.移動端的(de)HTML5開發META的(de)常用設置

1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
2. <meta content="yes" name="apple-mobile-web-app-capable">
3. <meta content="black" name="apple-mobile-web-app-status-bar-style">
4. <meta content="telephone=no" name="format-detection">

第一個(ge)meta標簽表示：強制(zhi)讓文檔(dang)的(de)寬度(du)(viewport寬度(du))與設備(bei)的(de)寬度(du)保持1:1,并且文檔(dang)最(zui)大(da)的(de)寬度(du)比(bi)例是1.0,且不允許用戶點擊屏幕放大(da)瀏覽；  width - viewport的(de)寬度(du) height - viewport的(de)高度(du) [device-width(設備(bei)的(de)物(wu)理像素(su)寬) | pixel_value] pixel_value是具(ju)體的(de)像素(su)值  案例:

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

initial-scale - 初始(shi)的(de)(de)縮(suo)放(fang)(fang)(fang)比(bi)例  minimum-scale - 允許用戶(hu)縮(suo)放(fang)(fang)(fang)到的(de)(de)最(zui)小比(bi)例  maximum-scale - 允許用戶(hu)縮(suo)放(fang)(fang)(fang)到的(de)(de)最(zui)大比(bi)例  user-scalable - 用戶(hu)是(shi)否可(ke)以手動縮(suo)放(fang)(fang)(fang),這里有的(de)(de)資料寫成no有的(de)(de)寫成0  第(di)二個(ge)meta標(biao)簽(qian)是(shi)iphone設備中的(de)(de)safari私有meta標(biao)簽(qian),它表示：允許全屏(ping)模式瀏(liu)覽；  第(di)三個(ge)meta標(biao)簽(qian)也(ye)是(shi)iphone的(de)(de)私有標(biao)簽(qian),它指定的(de)(de)iphone中safari頂(ding)端的(de)(de)狀(zhuang)(zhuang)態(tai)條(tiao)(tiao)的(de)(de)樣式；  在web app應用下狀(zhuang)(zhuang)態(tai)條(tiao)(tiao)（屏(ping)幕頂(ding)部條(tiao)(tiao)）的(de)(de)顏色(se)；  默認值為(wei)default（白色(se)）,可(ke)以定為(wei)black（黑色(se)）和(he)black-translucent（灰色(se)半透明）。  注意：若值為(wei)“black-translucent”將(jiang)會(hui)(hui)占據頁面(mian)px位(wei)置(zhi),浮(fu)在頁面(mian)上方（會(hui)(hui)覆蓋頁面(mian)20px高度(du)–iphone4和(he)itouch4的(de)(de)Retina屏(ping)幕為(wei)40px）。  第(di)四個(ge)meta標(biao)簽(qian)表示：告(gao)訴設備忽略將(jiang)頁面(mian)中的(de)(de)數(shu)字識別為(wei)電話(hua)號碼(ma)。

HTML5 META標(biao)簽常用設置參考資料點(dian)擊(ji)打開鏈(lian)接點(dian)擊(ji)打開鏈(lian)接 點(dian)擊(ji)打開鏈(lian)接

3.設(she)(she)備(bei)物理像(xiang)(xiang)素(su)(su)(su)(su)(設(she)(she)備(bei)像(xiang)(xiang)素(su)(su)(su)(su)),設(she)(she)備(bei)邏輯像(xiang)(xiang)素(su)(su)(su)(su)(設(she)(she)備(bei)獨立像(xiang)(xiang)素(su)(su)(su)(su)),代碼CSS像(xiang)(xiang)素(su)(su)(su)(su),設(she)(she)備(bei)像(xiang)(xiang)素(su)(su)(su)(su)比  設(she)(she)備(bei)物理分(fen)辨(bian)(bian)率(lv)(lv)(device pixels):物理分(fen)辨(bian)(bian)率(lv)(lv)也(ye)叫設(she)(she)備(bei)像(xiang)(xiang)素(su)(su)(su)(su),物理分(fen)辨(bian)(bian)率(lv)(lv)是LED顯示屏顯示的圖像(xiang)(xiang)原(yuan)始分(fen)辨(bian)(bian)率(lv)(lv)

設備邏(luo)輯分辨率(device independent pixels):人對于物(wu)體(ti)真實(shi)尺寸的認知(zhi)(屏幕大小),設計使用邏(luo)輯像(xiang)素來思考界面

代碼CSS像素(su):CSS像素(su)是Web編程(cheng)的(de)(de)(de)(de)概念,獨立于設(she)備的(de)(de)(de)(de)用于邏輯上衡量像素(su)的(de)(de)(de)(de)單位,也就是說我們(men)在(zai)做(zuo)網頁時用到的(de)(de)(de)(de)CSS像素(su)單位是抽象的(de)(de)(de)(de),而不是實際存在(zai)的(de)(de)(de)(de)

iphone 6為例(設(she)備像素(su)(su)比(bi)是2):  設(she)備物(wu)(wu)理(li)像素(su)(su)(設(she)備像素(su)(su)):750x1334  設(she)備邏輯像素(su)(su)(設(she)備獨(du)立像素(su)(su)):375x667  代碼CSS像素(su)(su):375x667  device-width(設(she)備的物(wu)(wu)理(li)像素(su)(su)寬):375 (1 CSS PX = 2 設(she)備的物(wu)(wu)理(li)像素(su)(su))

**案例(li)：**iphone 6s 的(de)(de)(de)物(wu)(wu)理像(xiang)(xiang)素(su)是(shi)(shi)750x1334,JS中window.innerWidth就是(shi)(shi)獲取(qu)設(she)(she)備(bei)(bei)的(de)(de)(de)物(wu)(wu)理像(xiang)(xiang)素(su),為(wei)什(shen)么window.innerWidth獲取(qu)的(de)(de)(de)值(zhi)(zhi)是(shi)(shi)375而(er)不(bu)是(shi)(shi)750呢?  因為(wei)window.innerWidth的(de)(de)(de)值(zhi)(zhi)是(shi)(shi)用CSS pixels來表示的(de)(de)(de),而(er)iphone 6s的(de)(de)(de)設(she)(she)備(bei)(bei)像(xiang)(xiang)素(su)比(bi)(bi)是(shi)(shi)2,1 CSS PX = 2 設(she)(she)備(bei)(bei)的(de)(de)(de)物(wu)(wu)理像(xiang)(xiang)素(su),所以(yi)window.innerWidth獲取(qu)的(de)(de)(de)值(zhi)(zhi)是(shi)(shi)375px,而(er)不(bu)是(shi)(shi)750px(750px = 375px * 設(she)(she)備(bei)(bei)像(xiang)(xiang)素(su)比(bi)(bi))

在(zai)1倍率的(de)屏幕上(shang): 1 CSS PX = 1 設備的(de)物(wu)(wu)理(li)像素  在(zai)2倍率的(de)屏幕上(shang): 1 CSS PX = 2 設備的(de)物(wu)(wu)理(li)像素  設備像素比(bi)=設備像素/設備獨(du)立像素(物(wu)(wu)理(li)像素/邏(luo)輯(ji)像素)  圖片實際像素 = 圖片邏(luo)輯(ji)像素/設備像素比(bi)

1. 1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
2.  
3.  
4. 2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
5.  
6.  
7. 3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）

以(yi)iPhone 5s為(wei)例,屏幕的(de)分辨(bian)率(lv)是640×1136,倍(bei)率(lv)是2。瀏覽器會(hui)認(ren)為(wei)屏幕的(de)分辨(bian)率(lv)是320×568,仍(reng)然是基(ji)準倍(bei)率(lv)的(de)尺寸。  所以(yi)在制作(zuo)頁(ye)面時,只(zhi)需要按(an)照基(ji)準倍(bei)率(lv)來就(jiu)行了。無論什么樣(yang)的(de)屏幕,倍(bei)率(lv)是多少(shao),都(dou)按(an)邏輯像素尺寸來設(she)計和(he)開發(fa)頁(ye)面。&nbsp; 只(zhi)不過(guo)在準備(bei)資源圖的(de)時候(hou),需要準備(bei)2倍(bei)大小的(de)圖,通過(guo)代碼把(ba)它縮成1倍(bei)大小顯示,才(cai)能保證清(qing)晰。