一個移動端的時代
從我工作以來，開發(fā)的一直都是移動端的頁面野揪，只有偶爾去開發(fā)幾個PC端的頁面访忿，現(xiàn)在是一個移動端的時代瞧栗，移動先行已經(jīng)深入骨髓，作為一個web前端開發(fā)海铆，如果你還在為如何開發(fā)移動端頁面而迷茫迹恐，或者你還在為開發(fā)出了一個在你手機(jī)上“完美”的移動頁面而沾沾自喜卻不知移動的世界有多“殘酷”的時候，那你應(yīng)該看看這篇文章了卧斟。希望這能給你幫助殴边，同時也能給我?guī)椭胁缓侠淼牡胤秸溆铮瑲g迎評論支持锤岸，必將改正。
這里是基礎(chǔ)板乙，你了解否是偷？
一、像素 – 什么是像素
像素是web頁面布局的基礎(chǔ)募逞，那么到底什么才是一個像素呢蛋铆？
像素：一個像素就是計算機(jī)屏幕所能顯示一種特定顏色的最小區(qū)域。這是像素的概念放接，實際上刺啦，在web前端開發(fā)領(lǐng)域，像素有以下兩層含義：
1纠脾、設(shè)備像素：設(shè)備屏幕的物理像素玛瘸，對于任何設(shè)備來講物理像素的數(shù)量是固定的蜕青。
2、CSS像素：這是一個抽象的像素概念糊渊，它是為web開發(fā)者創(chuàng)造的市咆。
如下圖，是在縮放比例為1再来，即scale = 1的情況下蒙兰，設(shè)備像素和CSS像素示意圖
現(xiàn)在你已經(jīng)了解了，原來像素對于web前端開發(fā)來講有這樣的兩層含義芒篷，那么你有沒有再深入的考慮這樣一個問題搜变，當(dāng)我給一個元素設(shè)置了width: 200px;這條樣式的時候，到底放生了什么事情针炉？
你可能會說：“廢話挠他！元素的寬度是200px唄〈叟粒”；對镰烧，并沒有什么問題，但是這個200px指的是什么呢怔鳖？因為我們知道，對于web前端來講像素有兩層含義结执，那么到底是設(shè)備像素還是CSS像素？實際上我們控制的是CSS像素献幔，因為前面提到了，CSS像素是給我們web前端開發(fā)者創(chuàng)造的抽象概念蜡感。所以你要記住：當(dāng)你給元素設(shè)置了 width: 200px 時铸敏，這個元素的寬度跨越了200個CSS像素。但是它并不一定跨越200個設(shè)備像素杈笔，至于會跨越多少個設(shè)備像素，就取決于手機(jī)屏幕的特性和用戶的縮放了,舉個栗子：
蘋果手機(jī)的視網(wǎng)膜屏幕，是一個高密度屏幕球榆，它的像素密度是普通屏幕的2倍，所以當(dāng)我們設(shè)置width: 200px;時持钉，200個CSS像素跨越了400個設(shè)備像素，如下圖：
如果用戶縮小頁面每强，那么一個CSS像素會明顯小于一個設(shè)備像素始腾，這個時候width: 200px;這條樣式中所設(shè)置的200個CSS像素跨越不了200個設(shè)備像素，如下圖：
讓我們來做一個總結(jié)
1空执、web前端領(lǐng)域浪箭，像素分為設(shè)備像素和CSS像素
3、一個CSS像素的大小是可變的辨绊，比如用后縮放頁面的時候奶栖，實際上就是在縮小或放大CSS像素，而設(shè)備像素?zé)o論大小還是數(shù)量都是不變的门坷。
二宣鄙、移動端的三個視口
一看標(biāo)題，你是不是蒙了默蚌？三個視口冻晤？什么三個視口？先別急敏簿，讓我們慢慢來講明也。
你一定寫過這樣一條樣式：width: 25%;但是你有想過給一個元素加上這樣一條樣式之后發(fā)生了什么嗎？25%是基于誰的25%惯裕？明白的同學(xué)可能知道了：一個塊元素默認(rèn)的寬度是其父元素的100%，是基于起父元素的绣硝，所以25%指的是父元素寬度的25%蜻势，所以，body元素的默認(rèn)寬度是html元素寬度的100%鹉胖，那么你有沒有想過html元素的寬度是基于誰的呢握玛？這個時候，就要引出一個概念：初始包含塊和視口了
記住一句話：視口是html的父元素甫菠，所以我們稱視口為初始包含塊挠铲。這樣你就明白了，html元素的百分比是基于視口的寂诱。
第一個視口：布局視口
首先你需要了解一個原因：瀏覽器廠商是希望滿足用戶的要求的拂苹，即在手機(jī)也能瀏覽為PC端設(shè)計的網(wǎng)站，所以瀏覽器廠商必須想辦法來在滿足~
在PC瀏覽器中痰洒，視口只有一個瓢棒，并且視口的寬度=瀏覽器窗口的寬度浴韭，但是在移動端也要根據(jù)這個來設(shè)計的話，那么PC端設(shè)計的網(wǎng)站在移動端看起來會很丑脯宿，因為PC端的網(wǎng)頁寬度在800 ~ 1024個CSS像素念颈，而手機(jī)屏幕要窄的多，這個時候再PC端25%的寬度在移動端看起來會很窄榴芳。所以翠语，布局視口的概念產(chǎn)生了财边。
布局是口：移動端CSS布局的依據(jù)視口酣难，即CSS布局會根據(jù)布局視口來計算。
也就是說紧索，在移動端珠漂，視口和瀏覽器窗口將不在關(guān)聯(lián)，實際上冈敛，布局視口要比瀏覽器窗口大的多(在手機(jī)和平板中瀏覽器布局視口的寬度在768~1024像素之間)，如下圖（布局視口和窗口的關(guān)系）：
可以通過以下JavaScript代碼獲取布局視口的寬度和高度：
1
2
document.documentElement.clientWidth
document.documentElement.clientHeight
第二個視口：視覺視口
視覺視口可能要更好理解一些，他就是用戶正在看到網(wǎng)站的區(qū)域癌压，如下圖：
第三個視口：理想視口
理想視口滩届，這是我們最需要關(guān)注的視口，現(xiàn)在我們來回顧一下我們知道了哪些視口趟据，有兩個术健，分別是：布局視口荞估，視覺視口。
我們前面提到過跪腹，布局視口的寬度一般在 680~1024像素之間冲茸，這樣可以使得PC網(wǎng)站在手機(jī)中不被壓扁轴术，但是這并不理想钦无，因為手機(jī)更適合窄的網(wǎng)站失暂，換句話說，布局視口并不是最理想的寬度凭峡，所以想罕，就引入了理想視口。
理想視口惭适，定義了理想視口的寬度癞志，比如對于iphone5來講，理想視口是320*568秉宿。但是最終作用的還是布局視口屯碴，因為我們的css是依據(jù)布局視口計算的导而，所以你可以這樣理解理想視口：理想的布局視口。下面這段代碼可以告訴手機(jī)瀏覽器要把布局視口設(shè)為理想視口：
1
上面那段代碼告訴瀏覽器：將布局視口的寬度設(shè)為理想視口韵丑。所以撵彻，上面代碼中的width指的是布局視口的寬 device-width 實際上就是理想視口的寬度陌僵。
好了铲掐，移動端的三個視口介紹完了摆霉，讓我們總結(jié)一下：
1、在PC端搭盾，布局視口就是瀏覽器窗口
2鸯隅、在移動端蝌以，視口被分為兩個：布局視口何之、視覺視口。
3徊件、移動端還有一個理想視口，它是布局視口的理想尺寸睹耐，即理想的布局視口部翘。（注：理想視口的尺寸因設(shè)備和瀏覽器的不同而不同，但這對于我們來說無所謂）
4捎迫、可以將布局視口的寬度設(shè)為理想視口
三窄绒、設(shè)備像素比(DPR)
下面你還需要了解一個概念崔兴，設(shè)備像素比(Device Pixel Ratio 簡稱：DPR)敲茄。
下面是設(shè)備像素比的計算公式
公式成立的大前提：（縮放比例為1）
設(shè)備像素比(DPR) = 設(shè)備像素個數(shù) / 理想視口CSS像素個數(shù)(device-width)
與理想視口一樣堰燎，設(shè)備像素比對于不同的設(shè)備是不同的，但是他們都是合理的秆剪，比如早起iphone的設(shè)備像素是320px仅讽，理想視口也是320px洁灵，所以早起iphone的DPR=1，而后來iphone的設(shè)備像素為640px苫费，理想視口還是320px黍衙，所以后來iphone的DPR=2荠诬。在開發(fā)中柑贞，打開瀏覽器的調(diào)試工具可以看到設(shè)備像素比，如下圖：
如上圖棠众，我們可以獲得以下信息：
iPhone5的理想視口是：320*568 device-width = 320闸拿，device-height = 568
iPhone5的設(shè)備像素比：2
根據(jù)公式：設(shè)備像素比(DPR) = 設(shè)備像素個數(shù) / 理想視口CSS像素個數(shù)(device-width)
可知iPhone5的設(shè)備像素為 640*1136
縮放
在講設(shè)備像素比公式的時候講到了：
公式成立的大前提：（縮放比例為1）
設(shè)備像素比(DPR) = 設(shè)備像素個數(shù) / 理想視口CSS像素個數(shù)(device-width)
那么縮放到底是什么呢新荤？也許這個問題讓你很疑惑苛骨，如果你自己閱讀了前面的內(nèi)容苟呐，你會注意到CSS像素的大小是可變得牵素，而縮放從技術(shù)實現(xiàn)的角度來講，就是放大或縮小CSS像素的過程请琳，怎么樣单起？明白了吧劣坊，當(dāng)你用雙指縮放頁面的時候，實際上是在放大或縮小CSS像素测蘑，至于什么是CSS像素碳胳，暈沫勿，回去從頭好好看~
也學(xué)你會覺得縮放沒什么味混，但是你了解這個概念至關(guān)重要翁锡，因為在《一篇真正教會你開發(fā)移動端頁面的文章(二)》中馆衔，會用到這里的概念怨绣。即
縮放：縮小放大的是 CSS像素篮撑。
meta標(biāo)簽
meta視口標(biāo)簽存在的主要目的是為了讓布局視口和理想視口的寬度匹配，meta視口標(biāo)簽應(yīng)該放在HTML文檔的head標(biāo)簽內(nèi)邪财，語法如下：
1
其中 content 屬性是一個字符串值树埠，字符串是由逗號“怎憋，”分隔的 名/值 對組成绊袋，共有5個：
1癌别、width：設(shè)置布局視口的寬
2蹋笼、init-scale：設(shè)置頁面的初始縮放程度
3剖毯、minimum-scale：設(shè)置了頁面最小縮放程度
4逊谋、maximum-scale：設(shè)置了頁面最大縮放程度
5胶滋、user-scalable：是否允許用戶對頁面進(jìn)行縮放操作
下面是一個常用的meta標(biāo)簽實例
1
2
3
上面代碼的意思是悲敷，讓布局視口的寬度等于理想視口的寬度镀迂，頁面的初始縮放比例以及最大縮放比例都為1，且不允許用戶對頁面進(jìn)行縮放操作妓柜。
媒體查詢
媒體查詢是響應(yīng)式設(shè)計的基礎(chǔ)涯穷，他有以下三點作用：
1、檢測媒體的類型作煌，比如 screen粟誓，tv等
2鹰服、檢測布局視口的特性悲酷，比如視口的寬高分辨率等
3设易、特性相關(guān)查詢顿肺，比如檢測瀏覽器是否支持某某特性（這一點不討論挟冠，因為它被目前瀏覽器支持的功能對于web開發(fā)來講很無用）
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袍睡，代表任何設(shè)備知染，并且設(shè)備的布局視口寬度大于等于321px且小于等于400px時，讓擁有box類的元素背景變紅斑胜。
