目前我們做移動端項目幾乎不需要考慮為什么要這樣寫樣式，為什么設計稿上100px我們直接寫成1rem，移動端的屏幕尺寸那么多變，為什么能輕松兼容？那我們得從移動端的屏幕尺寸來探索一下其中的原理，首先就得了解這些費解的概念。

我在網上收集了很多資料，眾說紛蕓，我按自己的理解整理了這篇文章，如果有理解不當的地方，請指正。

屏幕尺寸

即我們通常說的尺寸是多少多少英寸啦，指的是屏幕對角線的長度。比如iphone6的屏幕尺寸是4.7英寸

設備像素DP(device-pixels)

很多地方又叫設備屏幕尺寸、設備物理像素、屏幕分辨率等等，我感覺是一個概念。比如iphone6是1334*750

像素密度PPI(pixels per inch)

每英寸屏幕上的像素個數，不同屏幕不一樣，PPI越大屏幕顯示得越清晰，比如iPhone 3gs的設備像素是320×480，iPhone 4s的設備像素是640×960。剛好兩倍，然而兩款手機都是3.5英寸的，前者的像素密度是后者的兩倍，顯示出來的畫面更清晰細膩。從網上扒了個圖：

設備獨立像素dips(device-independent pixels)

有的地方也叫邏輯像素。其實也就是我們開發中的document.documentElement.clientWidth。只要邏輯像素相同，顯示區域的內容就相同。

倍率DPR(devicePixelRatio)

有的地方也叫設備像素比，是設備像素dp和設備獨立像素dips的比例，

也就是dpr = dp / dips

倍率與邏輯像素

概念介紹完了，我們來研究一下這兩者的關系，下面這個例子是在網上看到的，感覺解釋得比較清晰。

我們以iphone3gs(倍率為1)和iphone4s(倍率為2)來舉例，這兩者屏幕尺寸都是3.5英寸，大小是一樣的，但是分辨率相差了一倍。那么如果按PC網頁來考慮，iphone3gs的屏幕分辨率為320480，iphone4s的則為640960,那么在iphone4s上顯示的內容應該比在iphone3gs上顯示的多，如下圖：

可是實際上它們顯示的內容是一樣多的，這是為什么呢？這是因為Retina屏幕把2×2個像素當1個像素使用。比如原本44像素高的頂部導航欄，在Retina屏上用了88個像素的高度來顯示。導致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質卻更清晰。

我們的設計稿是以iphone6為基準來做的，而iphone6的屏幕像素寬是750px，邏輯像素是375px，那么為什么我們的設計稿是750px寬的呢？就是因為切圖時獲取到的圖片是頁面上的兩倍大，在retina屏幕上實際上是相當于把圖片縮小了一倍的，這樣可以看到更清晰的圖片。如果我們用375px的圖片，那么retina屏幕還有什么意義，顯示出來的效果就跟倍率為1的屏幕一樣了，沒有那么細膩了。

我們現在的屏幕適配方式

我們的_reset.less文件里面有一段媒體查詢代碼

html{ font-size: 312.5%; }

@media screen and (max-width:359px) and (orientation:portrait) {

html { font-size: 266.67%; }

}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {

html { font-size: 300%; }

}

@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {

html { font-size: 320%; }

}

@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {

html { font-size: 333.33%; }

}

@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){

html { font-size: 345%; }

}

@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){

html { font-size:360%; }

}

@media screen and (min-width:480px)and (max-width:639px) and (orientation:portrait){

html{ font-size:400%;}

}

@media screen and (min-width:640px) and (orientation:portrait){

html{ font-size:533.33%;}

}

后面的那些百分比值是怎么來的呢？

312.5%這個基本值是為了計算方便

頁面的字體默認是16px，我們把根節點字體設置為312.5%，那么就是16*312.5%=50px，對應設計稿上的100px，那么設計稿上100px的元素，我們樣式表里面寫成1rem就可以了。

在不同屏幕尺寸(指的是邏輯像素)下面，我們把根節點的字體按比例調整一下，那么頁面就按比例進行了縮放，那么我們在不同尺寸的屏幕上看到的頁面效果就是相同的了，這個比例是怎么計算的呢，我們拿

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {

html { font-size: 300%; }

}

這個范圍來說，(375/360)*312.5%=300%，于是就得到了這個比例。

> PS:其實這個媒體查詢并不是最終起作用的，它的存在只是為了防止js沒加載到的時候就先渲染了頁面，等后面js加載完后，頁面樣式改變太大而發生頁面跳動，體驗不好。最終起作用的是下面這段js代碼：

可以回頭讀一下(點這里—>)移動端開發規范感受一下

$("html").css("font-size",document.documentElement.clientHeight/document.documentElement.clientWidth<1.5 ? (document.documentElement.clientHeight/603*312.5+"%") : (document.documentElement.clientWidth/375*312.5+"%"));

//單屏全屏布局時使用,短屏下自動縮放

//$("html").css("font-size",document.documentElement.clientWidth/375*312.5+"%");//長頁面時使用,不縮放

總結

以上是生活随笔為你收集整理的前端屏幕尺寸和分辨率_屏幕尺寸、分辨率、倍率到底是什么鬼的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。