精通移動端佈局 - 概念篇 -

本文大多數的內容基本都是從多篇博客或相關文章中進行篩選，提煉出來，本來我也想用我匱乏的語言來描述，可是發現別人已經總結的更好了，因此...我仍是乖乖的站在巨人的肩膀上吧~~

---

完整目錄：

基本概念
    物理像素
    設備獨立像素
    CSS 像素
    PPI的概念
    DPR的概念
    縮放的概念
    viewPort 的概念
    viewport 渲染流程
    Meta 標籤說明

移動端佈局實踐
    混合方式
    REM 方式
        響應式
        JS自動換算
    縮放方式
        CSS3 縮放
        viewport 縮放

相關補充
    爲何須要meta標籤？
    傳統響應式佈局與移動端響應式的區別
    移動端字體以及大小的設置
    移動端背景圖縮放設置
    使用Sass提升px與rem轉換效率
    經過Chrome進行真機調試
    weinre 遠程調試

---

基本概念

物理像素

物理像素又叫「設備像素」，他是顯示設備中最微小的物理部件，每一個像素能夠根據操做系統設置本身的顏色和亮度，正是這些微小距離欺騙咱們的眼睛從而看到圖像效果。
物理像素也是廠商在出廠時就設置好了的————即一個設備的分辨率是固定不變的。

設備獨立像素

也叫「密度無關像素」，能夠認爲是計算機座標系統中的一個點，這個點表明一個可由程序使用的虛擬像素（好比CSS像素），而後由相關係統轉換爲物理像素。

CSS 像素

CSS像素是一個抽象單位，主要使用在瀏覽器上，用來精確度量（瀏覽器層面而言）WEB頁面上的內容，通常來講CSS像素也被稱之爲設備無關像素(device - independent pixel) 簡稱DIPS。
在不一樣的屏幕上，CSS像素所呈現的物理尺寸實質上都是同樣的，而不一樣的是CSS像素與所對應的物理像素具數是不一致的，在普通屏幕下，1個css像素對應的就是1個物理像素，而 retina 屏幕下，1個 css 像素對應的倒是多個物理像素。這一點在移動端上會更加的明顯，而在100%縮放模式下PC端上，咱們就能夠認爲 1物理像素就等於1css像素。

總的來講，物理像素是設備在物理層面上不可再分割的最小單元，而「設備獨立像素」則是一個統稱的概念，它主要指的是應用軟件在應用層面上如何度量內容，能夠這麼說，CSS像素就是設備獨立像素中的一種，是WEB瀏覽器主要採用的度量單位。

PPI的概念

PPI 就是屏幕密度，它是指顯示設備上每英寸（1英寸約等於2.54釐米）長度內存在的像素數量，單位即PPI。

其換算公式以下：

PPI最直觀的的效果能夠參考下圖：

按照蘋果公司的技術營銷宣傳，在 320PPI 以上的屏幕均可以被稱之爲retina屏幕。

DPR的概念

DPR 即是 device Pixel Ratio 的簡稱，即設備像素比，它反映了設備上的物理像素與設備獨立像素對應關係，也就是說 DPR 可讓咱們知道當前設備下邏輯像素與物理像素的對應狀況。
它的值能夠按照下面的公式計算出來:

設備像素比 = 物理像素 / 設備獨立像素

在JavaScript中咱們能夠直接經過如下window上的屬性獲取設備像素比

window.devicePixelRatio

而在CSS中，能夠經過如下屬性得到:

-webkit-device-pixel-ratio;
-webkit-min-device-pixel-ratio;
-webkit-max-device-pixel-ratio;

縮放的概念

在說縮放以前，咱們先定義一個略微嚴格的規定：

100% 縮放狀況下：1css像素 == 1物理像素

帶着這個定義咱們來看頁面在瀏覽器中的縮放狀況：
首先咱們假若有一個2px * 2px 寬高的盒子。根據定義在100%縮放狀況下 2px * 2px 是徹底等同於 2px * 2px的物理像素。
若是如今去縮放瀏覽器，咱們會發現2px*2px的尺寸會隨着縮放而發生變化。實際上現代瀏覽器的縮放功能就是經過拉伸像素的方式實現的。而這種拉伸像素的方式也更可以讓咱們清晰瞭解獨立像素與物理像素之間的差別。
首先，咱們能夠很明確的知道，瀏覽器無論怎麼拉伸像素它也不可能改變物理層面上的像素(物理像素)，因此它能也只可以改變本身的邏輯像素 - CSS像素，在放大的狀況下 1css像素 會佔據多個物理像素，從而在應用層面上使顯示區域寬度變小，瀏覽器爲了可以顯示完整的內容從而出現滾動條，而縮小的狀況下，多個css像素會被合併在一個1個物理像素中去顯示。可是這種方式其實是一種有損的過程，由於用1個物理像素去表示多個CSS像素，會致使內容丟失更多的細節。正是由於css像素的丟失，才致使內容變的更小。
更直觀的瞭解能夠看下圖：
100%模式下 1css像素就等於 1物理像素

在放大的狀況下，1css像素會佔據多個物理像素

在縮小的狀況下，多個css像素會被合併在物理像素中

viewPort 的概念

桌面環境下 viewport
viewport 實際上在桌面瀏覽器中就已經存在，讓咱們回憶下一下，若是如今頁面上有一個空的 div ，其寬度默認是100%，那麼這個100%的寬度是怎麼產生的呢？咱們能夠知道它是繼承其父元素 body，而body的寬度又是繼承其父元素 html。因此 body 元素和它的父元素 html 同樣寬。

那麼 html 元素的寬度是多少？它的寬度和瀏覽器窗口寬度同樣。你可能不知道的是這個行爲在理論上是如何工做的。理論上， html 元素的寬度是被viewport的寬度所限制的。 html 元素使用viewport寬度的100%。
在桌面環境下，viewport 實際上就等於瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，但viewport並非一個HTML結構，因此你不能用CSS來改變它。

在桌面環境下咱們能夠很容易的理解viewport，可是在移動瀏覽器環境下它會有一些複雜。

手機端 viewport
在手機端上viewport相似於一個虛擬的視口，一般狀況下這個虛擬的視口要比設備屏幕寬。
將網頁放入到虛擬的視口(viewport)中去顯示，是爲了解決太小的屏幕在顯示過大的網頁（如專爲桌面瀏覽器設計的網頁）時，致使出現滾動條從而影響在移動設備上的瀏覽體驗，但同時也會致使頁面總體佈局的縮小，文字不清晰，連接不方便點擊等問題，並且viewport也會破壞專門針對手機瀏覽器設計的網頁佈局。
因此在對於專門爲手機端製做的網頁，建議將viewport設置以下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

若按照PPK大神的理論，可將viewport分爲三種，而前文咱們所說的用來顯示頁面的viewport，咱們稱之爲 layout viewport，即佈局 viewport，layout viewport 隨着瀏覽器廠商的不一樣，其默認的尺寸也不盡相同，但經常使用的有 980px 1024px 等，除了layout viewport，還有 visual viewport，即視覺viewport，也就是咱們設備屏幕的物理尺寸，它也是物理實際存在的，例如：iphone5 是 320 * 568 。
若就嵌套關係來講 layout viewport 是嵌入在 visual viewport 中的，具體關係能夠參照下圖：

如今咱們已經有兩個viewport了：layout viewport 和 visual viewport。但開發者以爲還不夠，由於如今愈來愈多的網站都會爲移動設備進行單獨的設計，因此必須還要有一個能完美適配移動設備的viewport。所謂的完美適配指的是：

· 首先不須要用戶縮放和橫向滾動條就能正常的查看網站的全部內容；
· 其次顯示的內容大小是合適的。

好比一段14px大小的文字，不會由於在一個高密度像素的屏幕裏顯示得過小而沒法看清，理想的狀況是這段14px的文字不管是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差很少的。固然，不僅是文字，其餘元素像圖片什麼的也是這個道理。ppk把這個viewport叫作 ideal viewport，也就是第三個viewport——移動設備的理想 viewport。
ideal viewport 並無一個固定的尺寸，不一樣的設備擁有有不一樣的 ideal viewport。
但通常來講，ideal vieport 就等於 visual viewport。

viewport 渲染流程

不確保正確，但如下內容至少是我對一個頁面在被載入到手機瀏覽器中渲染過程的猜測。
示例手機：

分辨率：1920*1080
屏幕尺寸:640 * 360
設備像素比: 3

示例站點：
12306，年關將至想必也是你們比較常上一個網站

內容：
layout viewport在渲染頁面以前，會根據自身的寬度（默認或者meta指定）來設定CSS像素與 物理像素的佔比。經過佔比來決定內容的縮放程度，而這個縮放值，則是由 visual viewport 與 layout viewport決定的，其換算公式以下：

scale = layout viewport / visual viewport

在正常狀況下比較好理解，就如我手機分辨率寬度是1080來算，此時 我默認的viewport是980，如今基本上就是1css像素 == 1物理像素，但由於 PPI 的緣由，單位物理像素要更加的小，因此總體頁面被縮小的形式顯示在個人手機屏幕中，並且，12306默認的寬度是960，因此這960相對於我viewpot還剩有20px的左右邊距。由於個人物理像素是大於vieport默認的尺寸的，因此邏輯像素並無缺省，可是若是在比較老的iphone5上面，其實際分辨率是 640*1136，而viewport也默認爲980，實際上在展現頁面的時候邏輯像素會超出物理像素300多，所以邏輯像素有缺省，整個頁面是以一種犧牲部分細節有損的方式去展現的。

若是我指定了viewport的寬度爲 width = device-width 。那麼此時 1css像素 == DPR * 物理像素，同時這個值也是當前的縮放值。可是我若指定了 initial-scale = 1 時，則強制了 css像素 與 物理像素爲1:1的對比關係。

這些還都是簡單的渲染流程，若是涉及到縮放，實際上手機端在去渲染網頁時，其狀況可能會更加的複雜，並且，不一樣的手機廠商，不一樣的瀏覽器廠商，其實現的方式都是有差別的，若是想制定一套統一的標準去試圖闡述移動端網頁渲染流程，我我的認爲實際上也是沒有意義的。咱們只須要知道大體常規的渲染流程，就能夠更好的幫助咱們進行移動端的網頁開發。

Meta 標籤說明

meta標籤首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動設備的viewport問題。後來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對meta viewport的支持，事實也證實這個東西仍是很是有用。

在蘋果的規範中，meta viewport 有6個屬性(暫且把content中的那些東西稱爲一個個屬性和值)，以下：

Attribute	Value	Description
width	num	設置layout viewport 的寬度，爲一個正整數，或字符串"width-device"
initial-scale	num	設置頁面的初始縮放值，爲一個數字，能夠帶小數
minimum-scale	num	容許用戶的最小縮放值，爲一個數字，能夠帶小數
maximum-scale	num	容許用戶的最大縮放值，爲一個數字，能夠帶小數
height	num	設置layout viewport 的高度，這個屬性對咱們並不重要，不多使用
user-scalable	str	是否容許用戶進行縮放，值爲"no"或"yes", no 表明不容許，yes表明容許

這些屬性能夠同時使用，也能夠單獨使用或混合使用，多個屬性同時使用時用逗號隔開就好了。
此外，在安卓中還支持 target-densitydpi 這個私有屬性，它表示目標設備的密度等級，能夠自動設定css中的1px表明多少物理像素，開發者無需考慮換算的過程
target-densitydpi　值能夠爲一個數值或 high-dpi 、medium-dpi、low-dpi、device-dpi 這幾個字符串中的一個，特別說明的是，當 target-densitydpi=device-dpi 時， css中的1px會等於物理像素中的1px。

由於這個屬性只有安卓支持，而且安卓已經決定要廢棄target-densitydpi 這個屬性了，因此這個屬性咱們要避免進行使用 。

---

參考連接：
http://blog.csdn.net/aiolos1111/article/details/51967744
http://www.cnblogs.com/Mrs-cc/p/5329545.html
http://www.cnblogs.com/2050/p/3877280.html

下一篇：精通移動端佈局 - 實踐篇 - 【準備中】....