二、視口

2.1 視口的意思

用JavaScript語(yǔ)句：

document.documentElement.clientWidth;

可以輕松輸出，當(dāng)前瀏覽器寬度
 
iPhone認(rèn)為自己的屏幕寬度是980px。
 
980px是什么呢？是iPhone的分辨率么？不是！ 實(shí)際上就是蘋果公司，人為制定的一個(gè)參數(shù)，
“視口”。
 
蘋果的設(shè)計(jì)人員人為，蘋果手機(jī)如果自己認(rèn)為自己是980px像素的話，那么將能夠更好的再手機(jī)中顯示PC網(wǎng)站，因?yàn)榻^大多數(shù)世界上的網(wǎng)站的版心，都是980px左右。
簡(jiǎn)單的說(shuō)，在瀏覽網(wǎng)頁(yè)的時(shí)候，蘋果手機(jī)認(rèn)為自己是980px寬的。
 
蘋果手機(jī)，明明屏幕那么小，憑什么自己980px寬呢？？?。?！
各大手機(jī)廠商，開(kāi)始運(yùn)行程序員設(shè)置手機(jī)自己的視口。我們可以規(guī)范手機(jī)的視口不是默認(rèn)的那個(gè)值。
 

2.2 約束視口

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

 
一個(gè)name屬性和id屬性都是viewport (視口)的meta標(biāo)簽，就是約束視口標(biāo)簽。
我們通過(guò)content屬性，來(lái)進(jìn)行視口限制。
 

width=device-width,  → 設(shè)置這個(gè)視口的寬度，變?yōu)樵O(shè)備的寬度（蘋果變?yōu)榱?20） initial-scale=1.0,    → 設(shè)置視口的初始的縮放倍數(shù)為1.0倍 minimum-scale=1.0,   → 設(shè)置視口的最小的縮放倍數(shù)為1.0倍 maximum-scale=1.0,  →  設(shè)置視口的最大的縮放倍數(shù)為1.0倍 user-scalable=no   → 設(shè)置視口不可以被用戶縮放

實(shí)際上，蘋果的設(shè)備寬度也不是320px，這里的320px，到底是怎么出現(xiàn)的呢？實(shí)際上這叫做設(shè)備的“像素密度無(wú)關(guān)尺寸”。
蘋果設(shè)備，在約束視口之后的寬度就是320px。
 
制作手機(jī)網(wǎng)頁(yè)的時(shí)候，一定要約束視口！！否則響應(yīng)式失效。
 
我們還要熟知一些常見(jiàn)設(shè)備在約束視口之后，的尺寸：
iPhone(3及以后版本): 豎向320px  橫向568px
iPad： 豎向768px  橫向1024px
iPad mini：豎向768px  橫向1024px
三星Note3： 540px
三星 Galaxy S系列的：360px;
 
只能手機(jī)的視口（約束之后），一般都是320~360px之間。
各種pad在約束視口之后，都是620~768之間。
 
上面的數(shù)據(jù)非常有意義??！
可以為我們的CSS媒體查詢的突變點(diǎn)，提供理論參考。
 
● 當(dāng)用戶設(shè)備寬度大于980的時(shí)候，用PC界面；
● 當(dāng)用戶設(shè)備寬度在620~979之間，用Pad界面；
● 當(dāng)用戶設(shè)備寬度小于619的時(shí)候，用手機(jī)界面。
 
也就是說(shuō)，響應(yīng)式布局，不是什么新的技術(shù)，而是原有的一些技術(shù)的組合：流式布局（用百分比寫width、padding、margin）、媒體查詢（讓css能夠根據(jù)瀏覽器寬度來(lái)選擇是否被使用）

本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：傳智播客UI培訓(xùn)學(xué)院
首發(fā)：http://xamj520.com/ui