精通移动端布局 - 概念篇 -
本文大多數(shù)的內(nèi)容基本都是從多篇博客或相關(guān)文章中進(jìn)行篩選，提煉出來，原本我也想用我匱乏的語言來描述，但是發(fā)現(xiàn)別人已經(jīng)總結(jié)的更好了，所以...我還是乖乖的站在巨人的肩膀上吧~~
完整目錄：
基本概念
????物理像素
????設(shè)備獨(dú)立像素
????CSS 像素
????PPI的概念
????DPR的概念
????縮放的概念
????viewPort 的概念
????viewport 渲染流程
????Meta 標(biāo)簽說明
移動(dòng)端布局實(shí)踐
????混合方式
????REM 方式
????????響應(yīng)式
????????JS自動(dòng)換算
????縮放方式
????????CSS3 縮放
????????viewport 縮放
相關(guān)補(bǔ)充
????為什么需要meta標(biāo)簽？
????傳統(tǒng)響應(yīng)式布局與移動(dòng)端響應(yīng)式的區(qū)別
????移動(dòng)端字體以及大小的設(shè)置
????移動(dòng)端背景圖縮放設(shè)置
????使用Sass提高px與rem轉(zhuǎn)換效率
????通過Chrome進(jìn)行真機(jī)調(diào)試
????weinre 遠(yuǎn)程調(diào)試
基本概念
物理像素
物理像素又叫“設(shè)備像素”，他是顯示設(shè)備中最微小的物理部件，每個(gè)像素可以根據(jù)操作系統(tǒng)設(shè)置自己的顏色和亮度，正是這些微小距離欺騙我們的眼睛從而看到圖像效果。
物理像素也是廠商在出廠時(shí)就設(shè)置好了的————即一個(gè)設(shè)備的分辨率是固定不變的。
設(shè)備獨(dú)立像素
也叫“密度無關(guān)像素”，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中的一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可由程序使用的虛擬像素（比如CSS像素），然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
CSS 像素
CSS像素是一個(gè)抽象單位，主要使用在瀏覽器上，用來精確度量（瀏覽器層面而言）WEB頁面上的內(nèi)容，一般來說CSS像素也被稱之為設(shè)備無關(guān)像素(device - independent pixel) 簡(jiǎn)稱DIPS。
在不同的屏幕上，CSS像素所呈現(xiàn)的物理尺寸實(shí)質(zhì)上都是一樣的，而不同的是CSS像素與所對(duì)應(yīng)的物理像素具數(shù)是不一致的，在普通屏幕下，1個(gè)css像素對(duì)應(yīng)的就是1個(gè)物理像素，而 retina 屏幕下，1個(gè) css 像素對(duì)應(yīng)的卻是多個(gè)物理像素。這一點(diǎn)在移動(dòng)端上會(huì)更加的明顯，而在100%縮放模式下PC端上，我們就可以認(rèn)為 1物理像素就等于1css像素。
總的來說，物理像素是設(shè)備在物理層面上不可再分割的最小單元，而“設(shè)備獨(dú)立像素”則是一個(gè)統(tǒng)稱的概念，它主要指的是應(yīng)用軟件在應(yīng)用層面上如何度量?jī)?nèi)容，可以這么說，CSS像素就是設(shè)備獨(dú)立像素中的一種，是WEB瀏覽器主要采用的度量單位。
PPI的概念
PPI 就是屏幕密度，它是指顯示設(shè)備上每英寸（1英寸約等于2.54厘米）長(zhǎng)度內(nèi)存在的像素?cái)?shù)量，單位即PPI。
其換算公式如下：
PPI最直觀的的效果可以參考下圖：
按照蘋果公司的技術(shù)營銷宣傳，在 320PPI 以上的屏幕都可以被稱之為retina屏幕。
DPR的概念
DPR 便是 device Pixel Ratio 的簡(jiǎn)稱，即設(shè)備像素比，它反映了設(shè)備上的物理像素與設(shè)備獨(dú)立像素對(duì)應(yīng)關(guān)系，也就是說 DPR 可以讓我們知道當(dāng)前設(shè)備下邏輯像素與物理像素的對(duì)應(yīng)情況。
它的值可以按照下面的公式計(jì)算出來:
在JavaScript中我們可以直接通過以下window上的屬性獲取設(shè)備像素比
window.devicePixelRatio而在CSS中，可以通過以下屬性獲得:
-webkit-device-pixel-ratio; -webkit-min-device-pixel-ratio; -webkit-max-device-pixel-ratio;縮放的概念
在說縮放之前，我們先定義一個(gè)略微嚴(yán)格的規(guī)定：
100% 縮放情況下：1css像素 == 1物理像素帶著這個(gè)定義我們來看頁面在瀏覽器中的縮放情況：
首先我們假如有一個(gè)2px * 2px 寬高的盒子。根據(jù)定義在100%縮放情況下 2px * 2px 是完全等同于 2px * 2px的物理像素。
如果現(xiàn)在去縮放瀏覽器，我們會(huì)發(fā)現(xiàn)2px*2px的尺寸會(huì)隨著縮放而發(fā)生變化。實(shí)際上現(xiàn)代瀏覽器的縮放功能就是通過拉伸像素的方式實(shí)現(xiàn)的。而這種拉伸像素的方式也更能夠讓我們清晰了解獨(dú)立像素與物理像素之間的差異。
首先，我們可以很明確的知道，瀏覽器不管怎么拉伸像素它也不可能改變物理層面上的像素(物理像素)，所以它能也只能夠改變自己的邏輯像素 - CSS像素，在放大的情況下 1css像素 會(huì)占據(jù)多個(gè)物理像素，從而在應(yīng)用層面上使顯示區(qū)域?qū)挾茸冃?#xff0c;瀏覽器為了能夠顯示完整的內(nèi)容從而出現(xiàn)滾動(dòng)條，而縮小的情況下，多個(gè)css像素會(huì)被合并在一個(gè)1個(gè)物理像素中去顯示。但是這種方式實(shí)際上是一種有損的過程，因?yàn)橛?個(gè)物理像素去表示多個(gè)CSS像素，會(huì)導(dǎo)致內(nèi)容丟失更多的細(xì)節(jié)。正是因?yàn)閏ss像素的丟失，才導(dǎo)致內(nèi)容變的更小。
更直觀的了解可以看下圖：
100%模式下 1css像素就等于 1物理像素
在放大的情況下，1css像素會(huì)占據(jù)多個(gè)物理像素
在縮小的情況下，多個(gè)css像素會(huì)被合并在物理像素中
viewPort 的概念
桌面環(huán)境下 viewport
viewport 實(shí)際上在桌面瀏覽器中就已經(jīng)存在，讓我們回憶下一下，如果現(xiàn)在頁面上有一個(gè)空的 div ，其寬度默認(rèn)是100%，那么這個(gè)100%的寬度是怎么產(chǎn)生的呢？我們可以知道它是繼承其父元素 body，而body的寬度又是繼承其父元素 html。所以 body 元素和它的父元素 html 一樣寬。
那么 html 元素的寬度是多少？它的寬度和瀏覽器窗口寬度一樣。你可能不知道的是這個(gè)行為在理論上是如何工作的。理論上， html 元素的寬度是被viewport的寬度所限制的。 html 元素使用viewport寬度的100%。
在桌面環(huán)境下，viewport 實(shí)際上就等于瀏覽器窗口，擁有瀏覽器窗口的寬度和高度，但viewport并不是一個(gè)HTML結(jié)構(gòu)，所以你不能用CSS來改變它。
在桌面環(huán)境下我們可以很容易的理解viewport，但是在移動(dòng)瀏覽器環(huán)境下它會(huì)有一些復(fù)雜。
手機(jī)端 viewport
在手機(jī)端上viewport類似于一個(gè)虛擬的視口，通常情況下這個(gè)虛擬的視口要比設(shè)備屏幕寬。
將網(wǎng)頁放入到虛擬的視口(viewport)中去顯示，是為了解決過小的屏幕在顯示過大的網(wǎng)頁（如專為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁）時(shí)，導(dǎo)致出現(xiàn)滾動(dòng)條從而影響在移動(dòng)設(shè)備上的瀏覽體驗(yàn)，但同時(shí)也會(huì)導(dǎo)致頁面整體布局的縮小，文字不清晰，鏈接不方便點(diǎn)擊等問題，而且viewport也會(huì)破壞專門針對(duì)手機(jī)瀏覽器設(shè)計(jì)的網(wǎng)頁布局。
所以在對(duì)于專門為手機(jī)端制作的網(wǎng)頁，建議將viewport設(shè)置如下：
若按照PPK大神的理論，可將viewport分為三種，而前文我們所說的用來顯示頁面的viewport，我們稱之為 layout viewport，即布局 viewport，layout viewport 隨著瀏覽器廠商的不同，其默認(rèn)的尺寸也不盡相同，但常用的有 980px 1024px 等，除了layout viewport，還有 visual viewport，即視覺viewport，也就是我們?cè)O(shè)備屏幕的物理尺寸，它也是物理實(shí)際存在的，例如：iphone5 是 320 * 568 。
若就嵌套關(guān)系來說 layout viewport 是嵌入在 visual viewport 中的，具體關(guān)系可以參照下圖：
現(xiàn)在我們已經(jīng)有兩個(gè)viewport了：layout viewport 和 visual viewport。但開發(fā)者覺得還不夠，因?yàn)楝F(xiàn)在越來越多的網(wǎng)站都會(huì)為移動(dòng)設(shè)備進(jìn)行單獨(dú)的設(shè)計(jì)，所以必須還要有一個(gè)能完美適配移動(dòng)設(shè)備的viewport。所謂的完美適配指的是：
· 首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容； · 其次顯示的內(nèi)容大小是合適的。比如一段14px大小的文字，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。當(dāng)然，不只是文字，其他元素像圖片什么的也是這個(gè)道理。ppk把這個(gè)viewport叫做 ideal viewport，也就是第三個(gè)viewport——移動(dòng)設(shè)備的理想 viewport。
ideal viewport 并沒有一個(gè)固定的尺寸，不同的設(shè)備擁有有不同的 ideal viewport。
但一般來說，ideal vieport 就等于 visual viewport。
viewport 渲染流程
不確保正確，但以下內(nèi)容至少是我對(duì)一個(gè)頁面在被載入到手機(jī)瀏覽器中渲染過程的猜想。
示例手機(jī)：
示例站點(diǎn)：
12306，年關(guān)將至想必也是大家比較常上一個(gè)網(wǎng)站
內(nèi)容：
layout viewport在渲染頁面之前，會(huì)根據(jù)自身的寬度（默認(rèn)或者meta指定）來設(shè)定CSS像素與 物理像素的占比。通過占比來決定內(nèi)容的縮放程度，而這個(gè)縮放值，則是由 visual viewport 與 layout viewport決定的，其換算公式如下：
在正常情況下比較好理解，就如我手機(jī)分辨率寬度是1080來算，此時(shí) 我默認(rèn)的viewport是980，現(xiàn)在基本上就是1css像素 == 1物理像素，但因?yàn)?PPI 的原因，單位物理像素要更加的小，所以整體頁面被縮小的形式顯示在我的手機(jī)屏幕中，而且，12306默認(rèn)的寬度是960，所以這960相對(duì)于我viewpot還剩有20px的左右邊距。因?yàn)槲业奈锢硐袼厥谴笥趘ieport默認(rèn)的尺寸的，所以邏輯像素并沒有缺省，但是如果在比較老的iphone5上面，其實(shí)際分辨率是 640*1136，而viewport也默認(rèn)為980，實(shí)際上在展示頁面的時(shí)候邏輯像素會(huì)超出物理像素300多，因此邏輯像素有缺省，整個(gè)頁面是以一種犧牲部分細(xì)節(jié)有損的方式去展示的。
如果我指定了viewport的寬度為 width = device-width 。那么此時(shí) 1css像素 == DPR * 物理像素，同時(shí)這個(gè)值也是當(dāng)前的縮放值。但是我若指定了 initial-scale = 1 時(shí)，則強(qiáng)制了 css像素 與 物理像素為1:1的對(duì)比關(guān)系。
這些還都是簡(jiǎn)單的渲染流程，如果涉及到縮放，實(shí)際上手機(jī)端在去渲染網(wǎng)頁時(shí)，其情況可能會(huì)更加的復(fù)雜，而且，不同的手機(jī)廠商，不同的瀏覽器廠商，其實(shí)現(xiàn)的方式都是有差異的，如果想制定一套統(tǒng)一的標(biāo)準(zhǔn)去試圖闡述移動(dòng)端網(wǎng)頁渲染流程，我個(gè)人認(rèn)為實(shí)際上也是沒有意義的。我們只需要知道大致常規(guī)的渲染流程，就可以更好的幫助我們進(jìn)行移動(dòng)端的網(wǎng)頁開發(fā)。
Meta 標(biāo)簽說明
meta標(biāo)簽首先是由蘋果公司在其safari瀏覽器中引入的，目的就是解決移動(dòng)設(shè)備的viewport問題。后來安卓以及各大瀏覽器廠商也都紛紛效仿，引入對(duì)meta viewport的支持，事實(shí)也證明這個(gè)東西還是非常有用。
在蘋果的規(guī)范中，meta viewport 有6個(gè)屬性(暫且把content中的那些東西稱為一個(gè)個(gè)屬性和值)，如下：
| width | num | 設(shè)置layout viewport 的寬度，為一個(gè)正整數(shù)，或字符串"width-device" |
| initial-scale | num | 設(shè)置頁面的初始縮放值，為一個(gè)數(shù)字，可以帶小數(shù) |
| minimum-scale | num | 允許用戶的最小縮放值，為一個(gè)數(shù)字，可以帶小數(shù) |
| maximum-scale | num | 允許用戶的最大縮放值，為一個(gè)數(shù)字，可以帶小數(shù) |
| height | num | 設(shè)置layout viewport 的高度，這個(gè)屬性對(duì)我們并不重要，很少使用 |
| user-scalable | str | 是否允許用戶進(jìn)行縮放，值為"no"或"yes", no 代表不允許，yes代表允許 |
這些屬性可以同時(shí)使用，也可以單獨(dú)使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開就行了。
此外，在安卓中還支持 target-densitydpi 這個(gè)私有屬性，它表示目標(biāo)設(shè)備的密度等級(jí)，可以自動(dòng)設(shè)定css中的1px代表多少物理像素，開發(fā)者無需考慮換算的過程
target-densitydpi 值可以為一個(gè)數(shù)值或 high-dpi 、medium-dpi、low-dpi、device-dpi 這幾個(gè)字符串中的一個(gè)，特別說明的是，當(dāng) target-densitydpi=device-dpi 時(shí)， css中的1px會(huì)等于物理像素中的1px。
因?yàn)檫@個(gè)屬性只有安卓支持，并且安卓已經(jīng)決定要廢棄target-densitydpi 這個(gè)屬性了，所以這個(gè)屬性我們要避免進(jìn)行使用 。
參考鏈接：
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
下一篇：精通移動(dòng)端布局 - 實(shí)踐篇 - 【準(zhǔn)備中】....
轉(zhuǎn)載于:https://www.cnblogs.com/HCJJ/p/6347242.html
總結(jié)
以上是生活随笔為你收集整理的精通移动端布局 - 概念篇 -的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： ffmpeg H264 编解码配置
- 下一篇： CSS3 进阶