移動(dòng)端布局三種視口

1、移動(dòng)端布局三種視口移動(dòng)端的適配，我理解為兩點(diǎn)：第一點(diǎn)就是視口的縮放配置，牽扯出視口和像素等概念。目的是為讓我們的css樣式中規(guī)律像素匹配到手機(jī)終端的物理像素，讓網(wǎng)頁(yè)視圖適合手機(jī)屏幕。雖然在代碼中只是一個(gè)語(yǔ)句就解決的問(wèn)題，但要理解它，要弄懂無(wú)數(shù)概念。關(guān)于像素pixel歷史的詳解看下一篇文檔其次點(diǎn)就是rem單位的用法，目的是為了我們只需要一份代碼就可以適應(yīng)大部分不同屏幕的手機(jī)。以上兩點(diǎn)雖然實(shí)現(xiàn)的目的不同，但采納的辦法原理基本一樣，都用到縮放因子來(lái)解決問(wèn)題。第一種是dpr，其次種是rem。自適應(yīng)：指在同一終端下，頁(yè)面布局能按照視口本身變幻而自動(dòng)調(diào)整布局，比如pc端掃瞄器頁(yè)面尺寸的變幻，resize大

2、事；響應(yīng)式：指頁(yè)面能在按照檢測(cè)到的不同終端類(lèi)型，自動(dòng)調(diào)節(jié)布局。比如手機(jī)、平板、電腦等不同終端下的響應(yīng)。媒體查詢media的語(yǔ)法，要認(rèn)識(shí)。一、視口視口，從字面上用常規(guī)思維可以理解為人眼的可視區(qū)域。在移動(dòng)端開(kāi)發(fā)中，常將視口抽象劃分為布局視口、視覺(jué)視口和抱負(fù)視口。為什么這么劃分呢？我覺(jué)得還是為了讓我們更好理解css像素和設(shè)備像素的區(qū)分，也就是規(guī)律像素和物理像素的區(qū)分。在pc端開(kāi)發(fā)書(shū)寫(xiě)css時(shí)，對(duì)元素的尺寸的限定單位常常就是px，即像素大小。從一開(kāi)頭接觸和學(xué)習(xí)過(guò)程中，向來(lái)都是用法px，導(dǎo)致我們的思維產(chǎn)生定式，總覺(jué)得css中元素的大小的度量就惟獨(dú)px了。另一個(gè)默認(rèn)的思維定式就是在我們css代碼中，css

3、的px像素單位就是真切的代表一個(gè)像素，導(dǎo)致當(dāng)網(wǎng)頁(yè)開(kāi)發(fā)轉(zhuǎn)到移動(dòng)端開(kāi)發(fā)時(shí)，一個(gè)新概念的浮現(xiàn)對(duì)我們沖擊特殊大，很難轉(zhuǎn)過(guò)彎來(lái)理解，比如現(xiàn)在要說(shuō)的視口的理解，牽扯出來(lái)的css像素和設(shè)備像素的概念。其時(shí)，只要記住一點(diǎn)，css像素px只是代表web網(wǎng)頁(yè)中的一個(gè)度量單位，可以理解為同rem和em等單位一樣，需要有一個(gè)參照尺寸才干確定其實(shí)際大小。比如rem參照根字節(jié)點(diǎn)的字體大小來(lái)確定自身大小，em參照父級(jí)元素字體大小來(lái)確定自身大小。思維定式中rem和em參照物是我們肯定單位像素px而定的。像素px大小其時(shí)是相對(duì)顯示硬件中的發(fā)光點(diǎn)（dot）定義的，一個(gè)發(fā)光點(diǎn)常稱為一個(gè)物理像素。關(guān)于像素pixel的前世經(jīng)生，可以看

4、這里：顯示硬件中的發(fā)光點(diǎn)（dot）與圖像辨別率中的像素（pixel）是簡(jiǎn)單混淆的兩個(gè)概念， 顯示硬件中的點(diǎn)可以說(shuō)是硬件設(shè)備最小的顯示單元，而像素則既可是一個(gè)點(diǎn)，又可是多個(gè)點(diǎn)的集合。在掃描儀掃描圖像時(shí)，掃描儀的每一個(gè)樣點(diǎn)都是和所形成圖像的每一個(gè)像素相對(duì)應(yīng)的，此時(shí)掃描時(shí)設(shè)定的dpi值（dots per inch）與掃描形成圖像的ppi（pixel per inch）值是相等的，此時(shí)兩者可以劃等號(hào)。但在許多狀況下，兩者的區(qū)分是相當(dāng)大的。比如，辨別率為1 ppi的圖像，在300dpi的打印機(jī)上輸出，此時(shí)圖像的每一個(gè)像素，在打印時(shí)都對(duì)應(yīng)了300×300點(diǎn)。在計(jì)算機(jī)顯示器的運(yùn)用上也存在

5、類(lèi)似問(wèn)題，比如 12英寸顯示器的有效顯示區(qū)域約200mm×160mm，假如熒光屏的光點(diǎn)直徑為0.31mm，通過(guò)換算可知熒光屏上最大可顯示的光點(diǎn)數(shù)為640（200 ÷0.31）×480（160÷0.31），相應(yīng)的辨別率為80dpi。這個(gè)80dpi是這樣來(lái)的：640dot÷（200mm÷ 25.3995mm/inch）≈80dot/inch或者 480dot÷（160mm÷25.3995mm/inch）&am

6、p;asymp;80dot/inch 。在這種狀況下，顯示卡的顯示模式最高可設(shè)置為640×480，這時(shí)1 pixel由1 dot組成。如把顯示卡的顯示模式調(diào)節(jié)為320×200，在顯示一幅320×200的圖像時(shí)，一個(gè)像素就要對(duì)應(yīng)于四個(gè)光點(diǎn)。上面就說(shuō)明了我們?cè)趐c端書(shū)寫(xiě)css樣式時(shí)挺直用法px，不考慮適配的緣由，由于電腦出廠設(shè)置默認(rèn)都是ppi=顯示屏dpi的，1：1關(guān)系，即dpr（devicepixelratio,設(shè)備像素比=物理像素（即發(fā)光點(diǎn)）/規(guī)律像素（px），這是顯示器的最佳辨別率，也是我們px像素比例所依靠的辨別率。有兩種現(xiàn)象：1

7、、我們將電腦屏幕的辨別率調(diào)低，就會(huì)浮現(xiàn)一部分黑邊，即有顯示硬件中會(huì)有部分不被點(diǎn)亮的發(fā)光點(diǎn)。實(shí)現(xiàn)發(fā)光的點(diǎn)還是按設(shè)置的辨別率，即像素與點(diǎn)一一對(duì)應(yīng)。所以在pc端，dpr都是1.2、我們?cè)陔娔X端上對(duì)一張舉行放大和縮小，莫非說(shuō)我們就轉(zhuǎn)變了的像素尺寸了嘛？實(shí)際不是，長(zhǎng)寬方向的像素尺寸起碼數(shù)值上沒(méi)有轉(zhuǎn)變的。電腦轉(zhuǎn)變的只是每個(gè)每個(gè)像素對(duì)應(yīng)的發(fā)光點(diǎn)數(shù)量布局。跟上面掃描儀掃描一個(gè)道理。放大4（2*2）倍，本來(lái)一個(gè)像素對(duì)應(yīng)一個(gè)發(fā)光點(diǎn)變?yōu)楝F(xiàn)在一個(gè)像素對(duì)應(yīng)2個(gè)發(fā)光點(diǎn)。所以說(shuō)像素是可以被拉伸的。所以后面提到的手機(jī)端適配也是通過(guò)對(duì)像素拉伸達(dá)到的，就是說(shuō)讓一個(gè)規(guī)律像素對(duì)應(yīng)更多的發(fā)光點(diǎn)（物理像素）。手機(jī)屏幕在最開(kāi)頭的時(shí)候，像素

8、與發(fā)光點(diǎn)也是一對(duì)一的，此時(shí)在手機(jī)布局頁(yè)面操作就跟電腦pc端一樣，挺直用像素px度量就好了。但時(shí)代是長(zhǎng)進(jìn)的，科技更是在飛快的進(jìn)展，屏幕的分辯率越來(lái)越高，即同樣大小的屏幕所能產(chǎn)生的光點(diǎn)越來(lái)越多，屏幕的對(duì)應(yīng)的像素也越來(lái)越多。特殊是從蘋(píng)果公司在ipone4中采納retina視網(wǎng)膜屏之后。雖然像素密度的提升，頁(yè)面色彩的顯示量多為細(xì)致。但卻給移動(dòng)端頁(yè)面布局帶來(lái)了困擾。便利大家理解，數(shù)據(jù)和單位權(quán)當(dāng)假設(shè)，在最初的時(shí)候一個(gè)平方厘米的面積上就顯示10*10=100個(gè)像素點(diǎn)，那我css中某個(gè)字體大小就設(shè)為10px（字體大小以寬度像素為準(zhǔn)），我們?cè)谄聊簧峡吹竭@個(gè)字體感覺(jué)很好，但現(xiàn)在技術(shù)更新了，同樣1個(gè)平方厘米的面積上

9、，我可以顯示100*100=10000個(gè)像素點(diǎn)，那假如dpr還保持一比一的關(guān)系，那字體還是被顯示為10px（10個(gè)發(fā)光點(diǎn)），那此時(shí)我們看到的字體是不是變得小了無(wú)數(shù)，相當(dāng)于本來(lái)字體的寬度和長(zhǎng)度同比例縮小10倍。比如ipone3和ipone4，同樣是對(duì)角線8.9厘米大小的手機(jī)屏幕，ipone3能顯示的像素是320*480，而ipone4能顯示的像素是640*960。像素密度多了2倍。相當(dāng)在ipone3上顯示100px的字，在ipone4上同樣設(shè)置100px，但看上去字體大小會(huì)比ipone3縮小了2倍?？聪逻@張圖，手機(jī)屏幕的像素越來(lái)越高，那是不是在手機(jī)上顯示的字體越來(lái)越小呢？假如css里字體尺寸的像

10、素標(biāo)準(zhǔn)還維持本來(lái)pc端的dpr=1標(biāo)準(zhǔn)不變，那勢(shì)必會(huì)導(dǎo)致這樣的結(jié)果。所以蘋(píng)果公司領(lǐng)先在手機(jī)端轉(zhuǎn)變了dpr的比值。由于包括ipone3之前幾代手機(jī)里，手機(jī)的物理像素（即設(shè)備顯示屏的發(fā)光點(diǎn)）和css世界里的規(guī)律像素單位是1：1的關(guān)系，字體大小在手機(jī)里感官體驗(yàn)也是很好的。所以既然像素ppi增強(qiáng)了2倍，那這個(gè)比例關(guān)系就改為2：1啦。就是說(shuō)，手機(jī)屏幕的2個(gè)物理像素相當(dāng)于ccs里的1個(gè)規(guī)律像素。這樣屏幕尺寸沒(méi)變都是3.5寸屏，像素密度增強(qiáng)了兩倍，但因像素單位也增強(qiáng)2倍，所以也保證了字體大小沒(méi)變幻。這里我們常說(shuō)的dpr。它是由手機(jī)廠商按照自己手機(jī)屏幕尺寸和像素ppi考慮的，在手機(jī)出廠時(shí)就設(shè)定好了。像上面字體大小設(shè)定一樣，廠商按照手機(jī)屏幕尺