前端小白唉地，最近一直在做相關(guān)移動端頁面問題兔乞；針對移動設(shè)備分辨率問題總是有 些霧里看花的朦朧，剛才看了一下Markdown基本語法凄敢，索性應(yīng)用一下碌冶，做個簡單筆記，以備查閱復(fù)習(xí)涝缝；如有錯誤之處扑庞，希望大神路過不惜指正，感謝拒逮。
以下均為網(wǎng)絡(luò)搜集資料罐氨，如有版權(quán)問題，請聯(lián)系本小白刪除消恍。
首先岂昭，需要了解一些基本相關(guān)概念:
-
物理像素(physical pixel)
一個物理像素是顯示器(手機(jī)屏幕)上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下狠怨，每一個設(shè)備像素都有自己的顏色值和亮度值约啊。
-
設(shè)備獨(dú)立像素(density-independent pixel)](#id)
設(shè)備獨(dú)立像素(也叫密度無關(guān)像素)，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中 得一個點(diǎn)佣赖，這個點(diǎn)代表一個可以由程序使用的虛擬像素(比如: css像 素)恰矩，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。
所以說憎蛤，物理像素和設(shè)備獨(dú)立像素之間存在著一定的對應(yīng)關(guān)系外傅，這就是接下來要說的設(shè)備像素比。
-
設(shè)備像素比(device pixel ratio )
設(shè)備像素比(簡稱dpr)定義了物理像素和設(shè)備獨(dú)立像素的對應(yīng)關(guān)系俩檬，它的值可以按如下的公式的得到
設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上萎胰，x方向或者y方向
針對各個分辨率范圍 在不同HTML文檔設(shè)置不同font-size大小：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px)
html{font-size:11px}
@media screen and (min-width:376px) and (max-width:414px)
html{font-size:12px}
@media screen and (min-width:415px) and (max-width:639px)
html{font-size:15px}
@media screen and (min-width:640px) and (max-width:719px)
html{font-size:20px}
@media screen and (min-width:720px) and (max-width:749px)
html{font-size:22.5px}
@media screen and (min-width:750px) and (max-width:799px)
html{font-size:23.5px}
@media screen and (min-width:800px)```
>
最后 附上萬惡美帝移動產(chǎn)品屏幕分辨率
>>
| 設(shè)備名稱 | 分辨率 |
| :-------------: |:-------------:|
|iPhone4/iPhone4s| 640*960 |
|iPhone5/iPhone5s |640*1136 |
|iPhone6(7)s/iPhone6(7)s |750x1334 |
|iPhone6(7)P/iPhone6s P |1080x1920 |
|iPad 1 / 2,iPad mini | 1024 * 768 |
|iPad 3,4|2048 * 1536|