一個移動端的時代
從我工作以來，開發的一直都是移動端的頁面，只有偶爾去開發幾個PC端的頁面，現在是一個移動端的時代，移動先行已經深入骨髓，作為一個web前端開發，如果你還在為如何開發移動端頁面而迷茫，或者你還在為開發出了一個在你手機上“完美”的移動頁面而沾沾自喜卻不知移動的世界有多“殘酷”的時候，那你應該看看這篇文章了。希望這能給你幫助，同時也能給我幫助，有不合理的地方，歡迎評論支持，必將改正。
這里是基礎，你了解否？
一、像素 – 什么是像素
像素是web頁面布局的基礎，那么到底什么才是一個像素呢？
像素：一個像素就是計算機屏幕所能顯示一種特定顏色的最小區域。這是像素的概念，實際上，在web前端開發領域，像素有以下兩層含義：
1、設備像素：設備屏幕的物理像素，對于任何設備來講物理像素的數量是固定的。
2、CSS像素：這是一個抽象的像素概念，它是為web開發者創造的。
如下圖，是在縮放比例為1，即scale = 1的情況下，設備像素和CSS像素示意圖
現在你已經了解了，原來像素對于web前端開發來講有這樣的兩層含義，那么你有沒有再深入的考慮這樣一個問題，當我給一個元素設置了width: 200px;這條樣式的時候，到底放生了什么事情？
你可能會說：“廢話！元素的寬度是200px唄。”；對，并沒有什么問題，但是這個200px指的是什么呢？因為我們知道，對于web前端來講像素有兩層含義，那么到底是設備像素還是CSS像素？實際上我們控制的是CSS像素，因為前面提到了，CSS像素是給我們web前端開發者創造的抽象概念。所以你要記住：當你給元素設置了 width: 200px 時，這個元素的寬度跨越了200個CSS像素。但是它并不一定跨越200個設備像素，至于會跨越多少個設備像素，就取決于手機屏幕的特性和用戶的縮放了,舉個栗子：
蘋果手機的視網膜屏幕，是一個高密度屏幕，它的像素密度是普通屏幕的2倍，所以當我們設置width: 200px;時，200個CSS像素跨越了400個設備像素，如下圖：
如果用戶縮小頁面，那么一個CSS像素會明顯小于一個設備像素，這個時候width: 200px;這條樣式中所設置的200個CSS像素跨越不了200個設備像素，如下圖：
讓我們來做一個總結
1、web前端領域，像素分為設備像素和CSS像素
3、一個CSS像素的大小是可變的，比如用后縮放頁面的時候，實際上就是在縮小或放大CSS像素，而設備像素無論大小還是數量都是不變的。
二、移動端的三個視口
一看標題，你是不是蒙了？三個視口？什么三個視口？先別急，讓我們慢慢來講。
你一定寫過這樣一條樣式：width: 25%;但是你有想過給一個元素加上這樣一條樣式之后發生了什么嗎？25%是基于誰的25%？明白的同學可能知道了：一個塊元素默認的寬度是其父元素的100%，是基于起父元素的，所以25%指的是父元素寬度的25%，所以，body元素的默認寬度是html元素寬度的100%，那么你有沒有想過html元素的寬度是基于誰的呢？這個時候，就要引出一個概念：初始包含塊和視口了
記住一句話：視口是html的父元素，所以我們稱視口為初始包含塊。這樣你就明白了，html元素的百分比是基于視口的。
第一個視口：布局視口
首先你需要了解一個原因：瀏覽器廠商是希望滿足用戶的要求的，即在手機也能瀏覽為PC端設計的網站，所以瀏覽器廠商必須想辦法來在滿足~
在PC瀏覽器中，視口只有一個，并且視口的寬度=瀏覽器窗口的寬度，但是在移動端也要根據這個來設計的話，那么PC端設計的網站在移動端看起來會很丑，因為PC端的網頁寬度在800 ~ 1024個CSS像素，而手機屏幕要窄的多，這個時候再PC端25%的寬度在移動端看起來會很窄。所以，布局視口的概念產生了。
布局是口：移動端CSS布局的依據視口，即CSS布局會根據布局視口來計算。
也就是說，在移動端，視口和瀏覽器窗口將不在關聯，實際上，布局視口要比瀏覽器窗口大的多(在手機和平板中瀏覽器布局視口的寬度在768~1024像素之間)，如下圖（布局視口和窗口的關系）：
可以通過以下JavaScript代碼獲取布局視口的寬度和高度：
1
2
document.documentElement.clientWidth
document.documentElement.clientHeight
第二個視口：視覺視口
視覺視口可能要更好理解一些，他就是用戶正在看到網站的區域，如下圖：
第三個視口：理想視口
理想視口，這是我們最需要關注的視口，現在我們來回顧一下我們知道了哪些視口，有兩個，分別是：布局視口，視覺視口。
我們前面提到過，布局視口的寬度一般在 680~1024像素之間，這樣可以使得PC網站在手機中不被壓扁，但是這并不理想，因為手機更適合窄的網站，換句話說，布局視口并不是最理想的寬度，所以，就引入了理想視口。
理想視口，定義了理想視口的寬度，比如對于iphone5來講，理想視口是320*568。但是最終作用的還是布局視口，因為我們的css是依據布局視口計算的，所以你可以這樣理解理想視口：理想的布局視口。下面這段代碼可以告訴手機瀏覽器要把布局視口設為理想視口：
1
上面那段代碼告訴瀏覽器：將布局視口的寬度設為理想視口。所以，上面代碼中的width指的是布局視口的寬 device-width 實際上就是理想視口的寬度。
好了，移動端的三個視口介紹完了，讓我們總結一下：
1、在PC端，布局視口就是瀏覽器窗口
2、在移動端，視口被分為兩個：布局視口、視覺視口。
3、移動端還有一個理想視口，它是布局視口的理想尺寸，即理想的布局視口。（注：理想視口的尺寸因設備和瀏覽器的不同而不同，但這對于我們來說無所謂）
4、可以將布局視口的寬度設為理想視口
三、設備像素比(DPR)
下面你還需要了解一個概念，設備像素比(Device Pixel Ratio 簡稱：DPR)。
下面是設備像素比的計算公式
公式成立的大前提：（縮放比例為1）
設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)
與理想視口一樣，設備像素比對于不同的設備是不同的，但是他們都是合理的，比如早起iphone的設備像素是320px，理想視口也是320px，所以早起iphone的DPR=1，而后來iphone的設備像素為640px，理想視口還是320px，所以后來iphone的DPR=2。在開發中，打開瀏覽器的調試工具可以看到設備像素比，如下圖：
如上圖，我們可以獲得以下信息：
iPhone5的理想視口是：320*568 device-width = 320，device-height = 568
iPhone5的設備像素比：2
根據公式：設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)
可知iPhone5的設備像素為 640*1136
縮放
在講設備像素比公式的時候講到了：
公式成立的大前提：（縮放比例為1）
設備像素比(DPR) = 設備像素個數 / 理想視口CSS像素個數(device-width)
那么縮放到底是什么呢？也許這個問題讓你很疑惑，如果你自己閱讀了前面的內容，你會注意到CSS像素的大小是可變得，而縮放從技術實現的角度來講，就是放大或縮小CSS像素的過程，怎么樣？明白了吧，當你用雙指縮放頁面的時候，實際上是在放大或縮小CSS像素，至于什么是CSS像素，暈，回去從頭好好看~
也學你會覺得縮放沒什么，但是你了解這個概念至關重要，因為在《一篇真正教會你開發移動端頁面的文章(二)》中，會用到這里的概念。即
縮放：縮小放大的是 CSS像素。
meta標簽
meta視口標簽存在的主要目的是為了讓布局視口和理想視口的寬度匹配，meta視口標簽應該放在HTML文檔的head標簽內，語法如下：
1
其中 content 屬性是一個字符串值，字符串是由逗號“，”分隔的 名/值 對組成，共有5個：
1、width：設置布局視口的寬
2、init-scale：設置頁面的初始縮放程度
3、minimum-scale：設置了頁面最小縮放程度
4、maximum-scale：設置了頁面最大縮放程度
5、user-scalable：是否允許用戶對頁面進行縮放操作
下面是一個常用的meta標簽實例
1
2
3
上面代碼的意思是，讓布局視口的寬度等于理想視口的寬度，頁面的初始縮放比例以及最大縮放比例都為1，且不允許用戶對頁面進行縮放操作。
媒體查詢
媒體查詢是響應式設計的基礎，他有以下三點作用：
1、檢測媒體的類型，比如 screen，tv等
2、檢測布局視口的特性，比如視口的寬高分辨率等
3、特性相關查詢，比如檢測瀏覽器是否支持某某特性（這一點不討論，因為它被目前瀏覽器支持的功能對于web開發來講很無用）
css中使用媒體查詢的語法：
1
2
3
4
@media媒體類型and(視口特性閥值){
// 滿足條件的css樣式代碼
}
下面是一段在css中使用媒體查詢的示例:
1
2
3
4
5
@mediaalland(min-width:321px)and(max-width:400px){
.box{
background:red;
}
}
上面代碼中，媒體類型為all，代表任何設備，并且設備的布局視口寬度大于等于321px且小于等于400px時，讓擁有box類的元素背景變紅。
