作者：預見才能遇見，來自原文地址

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

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

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

2.樣式導入 
使用@import語句可以導入外聯樣式表，@import后跟需要導入的外聯樣式表的相對路徑，用;表示語句結束。

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

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

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

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

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和設備像素比有關  viewport的深入理解:點擊打開鏈接

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

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

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

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