現(xiàn)在手機(jī)分辨率這么大，如何寫響應(yīng)式布局？
時間：2023-11-09 15:48:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-11-09 15:48:01 來源：網(wǎng)站運(yùn)營
現(xiàn)在手機(jī)分辨率這么大，如何寫響應(yīng)式布局？：首先需要了解幾個概念：
像素（Pixel）
一個顯示屏的成像原理是通過一系列的
小點(diǎn)排列成一個大的矩形，不同的小點(diǎn)通過顯示不同的顏色來顯示成圖像。這每一個小點(diǎn)被叫做一個
物理像素。以題主提到的小米4為例。小米4的屏幕，
分辨率是
1920設(shè)備像素*1080設(shè)備像素，意味著小米4手機(jī)橫向上排列了1080個顯像用的小點(diǎn)，在縱向上排列了1920個顯像用的小點(diǎn)。另一個常見的數(shù)據(jù)叫
每英寸像素取值（Pixel per inch，簡稱PPI），意思是
每一英寸內(nèi)的物理像素數(shù)量，計算公式是
公式中的
屏幕尺寸指的是屏幕對角線的長度。一個顯示屏的PPI越高，說明在同一大小的屏幕上能顯示更多物理像素，能給圖像提供更多細(xì)節(jié)。
CSS像素
作為Web開發(fā)者我們整天在CSS里用
px作為長度單位
。這里的
px指的是
CSS像素。瀏覽器里的一切長度都是以CSS像素為單位的。在非高清屏幕以及未縮放瀏覽器的情況下，一個CSS像素等于一個物理像素；而在搭載了蘋果公司的視網(wǎng)膜顯示屏等高清屏幕（PPI特別高，一個屏幕上的物理像素點(diǎn)非常多）的設(shè)備上，如果一個CSS像素仍等于一個物理像素，那么網(wǎng)頁上的各種元素就變得非常小，用戶很難看清，因此高PPI的設(shè)備中，一個CSS像素通常等于兩個甚至三個物理像素（瀏覽器自動設(shè)定，不同瀏覽器設(shè)定的會不一樣）。如果一個CSS像素占用n個物理像素，那么我們就說此時的
dppx（dots per pixel）數(shù)為n。
dppx是一個單位。設(shè)備有多少dppx除了跟設(shè)備本身的PPI有關(guān)，也和當(dāng)前的縮放狀態(tài)有關(guān)，但總的來說不是前端開發(fā)者能控制的，而是瀏覽器廠商以及瀏覽器用戶（通過縮放頁面）控制的。桌面瀏覽器上，一個放大到200%的頁面（假如設(shè)備不是高清屏），一個CSS像素此時等同于兩個物理像素，即2dppx
那么最后以一個例子來講解以上的概念：
本人的筆記本電腦是宏基v5-573g高分屏版，分辨率1920物理像素*1080物理像素，對角線長度（即屏幕尺寸）15.3英寸，因此PPI為141.21。該P(yáng)PI不算特別低（但比起移動設(shè)備來說真是弱爆了），因此在瀏覽器不縮放的情況下若一個CSS像素等于一個設(shè)備像素，那么因?yàn)轫撁娉叽邕^小，會影響我的瀏覽，所以火狐瀏覽器貼心地進(jìn)行1.25dppx的設(shè)置，使得1CSS像素等于1.25物理像素（反觀Chrome仍為1），以下是在火狐和chrome下，不進(jìn)行任何縮放時瀏覽本站的截圖。
當(dāng)我將火狐瀏覽器的縮放設(shè)置到200%時，dppx數(shù)即變成2.5
是的，
可以說dppx可以看作devicePixelRatio（設(shè)備像素比，簡稱DPR）的單位，盡管DPR本身并不需要單位。綜上可以看出，
DPR由瀏覽器廠商確定。
dppx可以看作window.devicePixel的單位，
同時也可看作媒體查詢中device-pixel-ratio的單位。但I(xiàn)E11及以下版本并不支持這個單位，此時使用不標(biāo)準(zhǔn)的單位：dpi（Dots per inch）來代替。1dppx=96dpi（這換算的過程不展開了，因?yàn)槲乙膊磺宄?，直接拿來用似乎沒問題，需要知道的是，dpi也有設(shè)備的物理dpi和做Web開發(fā)時的dpi的區(qū)別），因此兼容性好的媒體查詢寫法是（來源
A full vendor stack for targeting High Resolution 'retina' devices）：
@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (min-device-pixel-ratio: 2), (min-resolution: 2dppx) {**All your high resolution styles go here**}另外，以下內(nèi)容也與DPR有關(guān)：
- CSS image-set 規(guī)范。
- 圖片上的 srcset 屬性。
視口（viewport）
上面我們了解了設(shè)備的物理像素和CSS像素的區(qū)別
，以及用dppx來度量具體設(shè)備上兩者的比
。接下來說說另一個重要概念：視口。
視口在CSS里的定義是
<html>元素的包含塊，稱為
初始包含塊。它的寬度
是所有CSS百分比寬度推算的根源。(塊級元素的寬度默認(rèn)為100%)
在桌面上，視口的寬度等同于瀏覽器窗口的寬度，高度即為瀏覽器窗口的高度。而在瀏覽器寬度通常為240px~640px的移動設(shè)備上也這樣做的話，則會很不方便。為了適應(yīng)為桌面瀏覽器設(shè)計的網(wǎng)站（這類網(wǎng)站使用固定布局，頁面主體的寬度通常顯式地設(shè)置在1000px上下），瀏覽器出現(xiàn)了
布局視口概念。與桌面瀏覽器不同的是，瀏覽器
默認(rèn)的布局視口寬度與瀏覽器寬度完全獨(dú)立。通常是768px~1024px，最常見的是980px（默認(rèn)的布局視口的高度，各手機(jī)各瀏覽器倒是沒有個準(zhǔn)。不過反正不重要），而桌面瀏覽器的布局視口的尺寸就是瀏覽器窗口的尺寸（其實(shí)桌面瀏覽器根本沒有“布局視口”的概念，“視口”就是瀏覽器的窗口）。題主在題目中提到
bootstrap分別對應(yīng)的是小屏幕768px，中屏幕992px，大屏幕1200px
這里的768px、992px、1200px是指什么的尺寸呢？可以看到，這里使用了單位px，暗示著這些都是CSS像素，而不是設(shè)備的物理像素，因此Bootstrap對“屏幕尺寸”的定義與設(shè)備屏幕的分辨率無關(guān)。實(shí)際上，這里的尺寸指的是瀏覽器的布局視口尺寸。
可以在meta標(biāo)簽內(nèi)指定一個布局視口尺寸，而不是使用默認(rèn)的尺寸：
<meta name="viewport" content="width=320">然而一般不指定具體寬度而是做如下設(shè)置：
<meta name="viewport" content="width=device-width，initial-scale=1">這里的
device-width告訴瀏覽器，將布局視口的寬度設(shè)置為設(shè)備最理想的寬度（DPR是瀏覽器決定的，因此最理想寬度自然也是）。以iPhone6（設(shè)備像素：1334*750）來說，瀏覽器決定了DPR是2，因此最理想寬度是“750設(shè)備像素/2=375px”（布局視口高度則順勢變成了1334設(shè)備像素/2 = 667px）。寬度最理想，意味著用戶無需縮放頁面，因此很多手機(jī)瀏覽器（不含safari）在這樣的設(shè)置下，不再具有300ms的click時延。該時延的本意就是用來判斷用戶是要click還是雙擊縮放頁面。此處盜個圖，紅箭頭指向的即DPR
不同的設(shè)備有不同的理想寬度（同一設(shè)備的不同瀏覽器也有可能擁有不同的理想寬度，盡管這種現(xiàn)象極為極為罕見），且隨著設(shè)備的橫放豎放也會有所改變，因此通常不指定特定的尺寸，而是使用device-width進(jìn)行自適應(yīng)。寬度為理想寬度的布局視口叫做“
理想視口”
當(dāng)設(shè)備的橫放、豎放方式被改變時，最佳DPR不變，布局視口寬度從"手機(jī)寬度/最佳DPR"變?yōu)?#34;手機(jī)長度/最佳DPR"，且因布局視口寬度有變，瀏覽器會進(jìn)行一次重排。不過iOS上的Safari在旋轉(zhuǎn)時不會改變布局視口的寬度（因此DPR提高了），除非在meta指令里設(shè)置了initial-scale=1
媒體查詢中，min-width、max-width的查詢即是對布局視口寬度的查詢。因此若想通過媒體查詢來實(shí)現(xiàn)響應(yīng)式設(shè)計，應(yīng)當(dāng)設(shè)置一個設(shè)備的布局視口寬度，否則移動瀏覽器使用默認(rèn)布局視口寬度（大都是980px）會使針對視口寬度的媒體查詢無功而返。
另有min-device-width、max-device-device的查詢（本質(zhì)上是screen.width的查詢），對桌面瀏覽器的意義不大。在移動瀏覽器上，是對不隨著設(shè)備的橫屏、豎屏而改變的設(shè)備“最理想寬度”的查詢。例如，iPhone6的“device-width”永遠(yuǎn)是375px，而它的“width”會隨著橫屏豎屏而改變。
總結(jié)進(jìn)行響應(yīng)式的設(shè)計大概有以下幾個注意點(diǎn)：
1. 通過meta標(biāo)簽指定布局視口而不是使用默認(rèn)的、寬度通常為980px的布局視口
2. 通過媒體查詢或者document.documentElement.clientWidth來根據(jù)布局視口的寬度的不同來做設(shè)計
3. 通過媒體查詢或者window.devicePixelRatio來根據(jù)DPR的不同來提供分辨率不同的圖像
在線咨詢
