精通移动端布局 - 概念篇 -
本文大多數的內容基本都是從多篇博客或相關文章中進行篩選，提煉出來，原本我也想用我匱乏的語言來描述，但是發現別人已經總結的更好了，所以...我還是乖乖的站在巨人的肩膀上吧~~
完整目錄：
基本概念
????物理像素
????設備獨立像素
????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設置如下：
若按照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 渲染流程
不確保正確，但以下內容至少是我對一個頁面在被載入到手機瀏覽器中渲染過程的猜想。
示例手機：
示例站點：
12306，年關將至想必也是大家比較常上一個網站
內容：
layout viewport在渲染頁面之前，會根據自身的寬度（默認或者meta指定）來設定CSS像素與 物理像素的占比。通過占比來決定內容的縮放程度，而這個縮放值，則是由 visual viewport 與 layout 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中的那些東西稱為一個個屬性和值)，如下：
| 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
下一篇：精通移動端布局 - 實踐篇 - 【準備中】....
轉載于:https://www.cnblogs.com/HCJJ/p/6347242.html
總結
以上是生活随笔為你收集整理的精通移动端布局 - 概念篇 -的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ffmpeg H264 编解码配置
- 下一篇： CSS3 进阶