作者(zhe)：預見才能(neng)遇見，來自原文(wen)地(di)址(zhi)

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

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

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

2.樣式導入 
使(shi)用@import語句(ju)可(ke)以導(dao)入外聯樣(yang)式表(biao)，@import后(hou)跟(gen)需要導(dao)入的外聯樣(yang)式表(biao)的相對路徑，用;表(biao)示語句(ju)結束。

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

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

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

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

4.選擇(ze)器(qi)  目前(qian)支(zhi)持(chi)的選擇(ze)器(qi)有： 

 5.全(quan)(quan)局樣式(shi)與局部(bu)樣式(shi)  定義在 app.wxss 中的(de)樣式(shi)為(wei)全(quan)(quan)局樣式(shi)，作用(yong)于每一個(ge)頁面。在 page 的(de) wxss 文件(jian)中定義的(de)樣式(shi)為(wei)局部(bu)樣式(shi)，只作用(yong)在對應的(de)頁面，并(bing)會覆蓋 app.wxss 中相同的(de)選擇(ze)器。

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

 1.viewport(可(ke)(ke)視(shi)區域(yu)大小(xiao))的(de)(de)(de)(de)(de)(de)概(gai)念理(li)解和(he)知(zhi)識積累(lei)  (1)移動(dong)設(she)備上(shang)的(de)(de)(de)(de)(de)(de)viewport就(jiu)是(shi)設(she)備的(de)(de)(de)(de)(de)(de)屏幕上(shang)能(neng)用來(lai)顯(xian)示(shi)網(wang)(wang)頁(ye)(ye)(ye)的(de)(de)(de)(de)(de)(de)那一塊(kuai)區域(yu),就(jiu)是(shi)瀏覽器上(shang)用來(lai)顯(xian)示(shi)網(wang)(wang)頁(ye)(ye)(ye)的(de)(de)(de)(de)(de)(de)那部分(fen)區域(yu)  (2)viewport不一定是(shi)瀏覽器或者設(she)備屏幕可(ke)(ke)視(shi)區域(yu)的(de)(de)(de)(de)(de)(de)大小(xiao),可(ke)(ke)能(neng)比可(ke)(ke)視(shi)區域(yu)大,也(ye)可(ke)(ke)能(neng)比可(ke)(ke)視(shi)區域(yu)小(xiao),因(yin)為viewport的(de)(de)(de)(de)(de)(de)大小(xiao)是(shi)可(ke)(ke)以(yi)設(she)置(zhi)的(de)(de)(de)(de)(de)(de)  (3)大部分(fen)移動(dong)設(she)備默認的(de)(de)(de)(de)(de)(de)viewport都(dou)是(shi)980px,多(duo)數情況(kuang)下要大于device-width,因(yin)此一般(ban)都(dou)要在移動(dong)端重置(zhi)viewport,讓width=device-width  (4)通過JavaScript獲(huo)取viewport的(de)(de)(de)(de)(de)(de)方式(shi)(shi)：document.documentElement.clientWidth,獲(huo)取device-width的(de)(de)(de)(de)(de)(de)方式(shi)(shi)window.innerWidth,獲(huo)取設(she)備像(xiang)素(su)(su)(su)比window.devicePixelRatio  (5)蘋果從iPhone4開始引進了(le)Retina屏幕,一個(ge)CSS像(xiang)素(su)(su)(su)可(ke)(ke)以(yi)表(biao)(biao)示(shi)多(duo)個(ge)物理(li)像(xiang)素(su)(su)(su),并(bing)且(qie)在頁(ye)(ye)(ye)面縮(suo)放到其他比例時候,也(ye)可(ke)(ke)以(yi)做到CSS 的(de)(de)(de)(de)(de)(de)1px表(biao)(biao)示(shi)多(duo)個(ge)device pixels  (6)前(qian)端開發中的(de)(de)(de)(de)(de)(de)CSS pixels和(he)設(she)備分(fen)辨率(lv)所講的(de)(de)(de)(de)(de)(de)resolution pixels 無關,開發中的(de)(de)(de)(de)(de)(de)CSS pixels和(he)設(she)備像(xiang)素(su)(su)(su)比有關  viewport的(de)(de)(de)(de)(de)(de)深(shen)入理(li)解:點擊打開鏈接

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

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標簽表(biao)示：強制讓文檔的(de)寬(kuan)度(du)(du)(viewport寬(kuan)度(du)(du))與設(she)備的(de)寬(kuan)度(du)(du)保持(chi)1:1,并且文檔最大的(de)寬(kuan)度(du)(du)比(bi)例是1.0,且不(bu)允許用戶點擊屏幕放大瀏覽；  width - viewport的(de)寬(kuan)度(du)(du) height - viewport的(de)高度(du)(du) [device-width(設(she)備的(de)物理(li)像素(su)寬(kuan)) | pixel_value] pixel_value是具體的(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)(de)(de)(de)(de)(de)縮(suo)(suo)放(fang)比(bi)例  minimum-scale - 允(yun)許用戶(hu)縮(suo)(suo)放(fang)到的(de)(de)(de)(de)(de)(de)(de)最小比(bi)例  maximum-scale - 允(yun)許用戶(hu)縮(suo)(suo)放(fang)到的(de)(de)(de)(de)(de)(de)(de)最大比(bi)例  user-scalable - 用戶(hu)是(shi)否可以手動縮(suo)(suo)放(fang),這里有(you)的(de)(de)(de)(de)(de)(de)(de)資料寫成no有(you)的(de)(de)(de)(de)(de)(de)(de)寫成0  第(di)(di)二(er)個(ge)meta標簽(qian)(qian)是(shi)iphone設備中(zhong)的(de)(de)(de)(de)(de)(de)(de)safari私有(you)meta標簽(qian)(qian),它表示：允(yun)許全屏(ping)模式瀏覽；  第(di)(di)三個(ge)meta標簽(qian)(qian)也是(shi)iphone的(de)(de)(de)(de)(de)(de)(de)私有(you)標簽(qian)(qian),它指定的(de)(de)(de)(de)(de)(de)(de)iphone中(zhong)safari頂(ding)端的(de)(de)(de)(de)(de)(de)(de)狀(zhuang)態(tai)條(tiao)的(de)(de)(de)(de)(de)(de)(de)樣式；  在(zai)web app應用下狀(zhuang)態(tai)條(tiao)（屏(ping)幕頂(ding)部條(tiao)）的(de)(de)(de)(de)(de)(de)(de)顏色；  默認值(zhi)為default（白色）,可以定為black（黑色）和(he)(he)black-translucent（灰色半透明）。  注意：若值(zhi)為“black-translucent”將會占據(ju)頁(ye)面px位置,浮在(zai)頁(ye)面上方（會覆(fu)蓋(gai)頁(ye)面20px高度–iphone4和(he)(he)itouch4的(de)(de)(de)(de)(de)(de)(de)Retina屏(ping)幕為40px）。  第(di)(di)四個(ge)meta標簽(qian)(qian)表示：告訴設備忽略將頁(ye)面中(zhong)的(de)(de)(de)(de)(de)(de)(de)數字識別為電話號碼。

HTML5 META標簽常用設置參考資(zi)料點擊打開鏈接(jie)點擊打開鏈接(jie) 點擊打開鏈接(jie)

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

設備邏輯分辨率(device independent pixels):人對于物(wu)體真實尺寸(cun)的(de)認(ren)知(屏幕大小),設計(ji)使用邏輯像素來(lai)思考(kao)界(jie)面(mian)

代碼(ma)CSS像(xiang)素(su)(su):CSS像(xiang)素(su)(su)是Web編程(cheng)的概念(nian),獨(du)立于設(she)備的用(yong)于邏輯(ji)上衡量像(xiang)素(su)(su)的單位,也(ye)就是說我們在做網(wang)頁時用(yong)到(dao)的CSS像(xiang)素(su)(su)單位是抽象的,而不是實際(ji)存在的

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

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

在1倍率(lv)的屏幕(mu)上: 1 CSS PX = 1 設(she)備(bei)(bei)(bei)的物(wu)(wu)理(li)像(xiang)(xiang)(xiang)素  在2倍率(lv)的屏幕(mu)上: 1 CSS PX = 2 設(she)備(bei)(bei)(bei)的物(wu)(wu)理(li)像(xiang)(xiang)(xiang)素  設(she)備(bei)(bei)(bei)像(xiang)(xiang)(xiang)素比(bi)=設(she)備(bei)(bei)(bei)像(xiang)(xiang)(xiang)素/設(she)備(bei)(bei)(bei)獨立像(xiang)(xiang)(xiang)素(物(wu)(wu)理(li)像(xiang)(xiang)(xiang)素/邏輯(ji)像(xiang)(xiang)(xiang)素)  圖片(pian)實際像(xiang)(xiang)(xiang)素 = 圖片(pian)邏輯(ji)像(xiang)(xiang)(xiang)素/設(she)備(bei)(bei)(bei)像(xiang)(xiang)(xiang)素比(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）

以iPhone 5s為例,屏幕(mu)的(de)分辨(bian)率(lv)(lv)是640×1136,倍(bei)率(lv)(lv)是2。瀏覽器會認為屏幕(mu)的(de)分辨(bian)率(lv)(lv)是320×568,仍然(ran)是基準(zhun)倍(bei)率(lv)(lv)的(de)尺寸。  所以在制作(zuo)頁(ye)面時(shi),只(zhi)需要按(an)照基準(zhun)倍(bei)率(lv)(lv)來就行了(le)。無論什么樣的(de)屏幕(mu),倍(bei)率(lv)(lv)是多少,都按(an)邏輯像素尺寸來設計和(he)開(kai)發頁(ye)面。  只(zhi)不(bu)過(guo)(guo)在準(zhun)備資源圖(tu)的(de)時(shi)候,需要準(zhun)備2倍(bei)大小的(de)圖(tu),通過(guo)(guo)代碼(ma)把它縮成1倍(bei)大小顯示,才能保證清(qing)晰。