分辨率 · 前端筆記

[TOC] # 英寸一般用英寸描述屏幕的物理大小，如電腦顯示器的`17`、`22`，手機顯示器的`4.8`、`5.7`等使用的單位都是英寸。 需要注意，上面的尺寸都是屏幕對角線的長度： ![](https://box.kancloud.cn/d8b1c4e3b44aaef589cbb9476f6d9f9f_1280x903.png) 英寸(`inch`,縮寫為`in`)在荷蘭語中的本意是大拇指，一英寸就是指甲底部普通人拇指的寬度。英寸和厘米的換算：`1英寸 = 2.54 厘米` # 分辨率 ## 像素像素即一個小方塊，它具有特定的位置和顏色。 圖片、電子屏幕（手機、電腦）就是由無數個具有特定顏色和特定位置的小方塊拼接而成。 像素可以作為圖片或電子屏幕的最小組成單位。 通常我們所說的分辨率有兩種，屏幕分辨率和圖像分辨率。 ## 屏幕分辨率屏幕分辨率指**一個屏幕具體由多少個像素點**組成。 下面是`apple`的官網上對手機分辨率的描述： ![](https://box.kancloud.cn/e6ec3c19bc7b1abc09d10a33986c4332_828x782.png) `iPhone XS Max`和`iPhone SE`的分辨率分別為`2688 x 1242`和`1136 x 640`。這表示手機分別在垂直和水平上所具有的像素點數。 當然分辨率高不代表屏幕就清晰，屏幕的清晰程度還與尺寸有關。 ## 圖像分辨率我們通常說的 **圖片分辨率** 其實是指圖片含有的`像素數`，比如一張圖片的分辨率為`800 x 400`。這表示圖片分別在垂直和水平上所具有的像素點數為`800`和`400`。 同一尺寸的圖片，分辨率越高，圖片越清晰。 ![](https://box.kancloud.cn/bb0283d7d91c744d8cc56326dfd2dc59_788x133.png) ## PPI `PPI(Pixel Per Inch)`：每英寸包括的像素數。 `PPI`可以用于描述屏幕的清晰度以及一張圖片的質量。 使用`PPI`描述圖片時，`PPI`越高，圖片質量越高，使用`PPI`描述屏幕時，`PPI`越高，屏幕越清晰。 在上面描述手機分辨率的圖片中，我們可以看到：`iPhone XS Max` 和 `iPhone SE`的`PPI`分別為`458`和`326`，這足以證明前者的屏幕更清晰。 由于手機尺寸為手機對角線的長度，我們通常使用如下的方法計算`PPI`: ![](https://box.kancloud.cn/b46a79e3e5b553dd6748339a6782889a_307x83.png) `iPhone 6`的`PPI`為：![](https://box.kancloud.cn/5d94bd367c571398c39b6c784e31c7c8_222x57.png) ，那它每英寸約含有`326`個物理像素點。 ## DPI `DPI(Dot Per Inch)`：即每英寸包括的點數。 這里的點是一個抽象的單位，它可以是屏幕像素點、圖片像素點也可以是打印機的墨點。 平時你可能會看到使用`DPI`來描述圖片和屏幕，這時的`DPI`應該和`PPI`是等價的，`DPI`最常用的是用于描述打印機，表示打印機每英寸可以打印的點數。 一張圖片在屏幕上顯示時，它的像素點數是規則排列的，每個像素點都有特定的位置和顏色。 當使用打印機進行打印時，打印機可能不會規則的將這些點打印出來，而是使用一個個打印點來呈現這張圖像，這些打印點之間會有一定的空隙，這就是`DPI`所描述的：打印點的密度。 ![](https://box.kancloud.cn/d6e006606b6347be499cd8621fa5f90a_624x296.png) 在上面的圖像中我們可以清晰的看到，打印機是如何使用墨點來打印一張圖像。 所以，打印機的`DPI`越高，打印圖像的精細程度就越高，同時這也會消耗更多的墨點和時間。 # 設備獨立像素實際上，上面我們描述的像素都是 **物理像素**，即設備上真實的物理單元。 下面我們來看看 **設備獨立像素** 究竟是如何產生的： 智能手機發展非常之快，在幾年之前，我們還用著分辨率非常低的手機，比如下面左側的白色手機，它的分辨率是`320x480`，我們可以在上面瀏覽正常的文字、圖片等等。 但是，隨著科技的發展，低分辨率的手機已經不能滿足我們的需求了。很快，更高分辨率的屏幕誕生了，比如下面的黑色手機，它的分辨率是`640x940`，正好是白色手機的兩倍。 ![](https://box.kancloud.cn/7987a7735ae1af98335a0f493e7654df_1110x960.png) 理論上來講，在白色手機上相同大小的圖片和文字，在黑色手機上會被縮放一倍，因為它的分辨率提高了一倍。這樣，豈不是后面出現更高分辨率的手機，頁面元素會變得越來越小嗎？ 然而，事實并不是這樣的，我們現在使用的智能手機，不管分辨率多高，他們所展示的界面比例都是基本類似的。喬布斯在`iPhone4`的發布會上首次提出了`Retina Display`(視網膜屏幕)的概念，它正是解決了上面的問題，這也使它成為一款跨時代的手機。 在`iPhone4`使用的視網膜屏幕中，把`2x2`個像素當`1`個像素使用，這樣讓屏幕看起來更精致，但是元素的大小卻不會改變。 ![](https://box.kancloud.cn/07092530b6d4c6d2e6c85615e94bfd70_926x333.png) 如果黑色手機使用了視網膜屏幕的技術，那么顯示結果應該是下面的情況，比如列表的寬度為`300`個像素，那么在一條水平線上，白色手機會用`300`個物理像素去渲染它，而黑色手機實際上會用`600`個物理像素去渲染它。 我們必須用一種單位來同時告訴不同分辨率的手機，它們在界面上顯示元素的大小是多少，這個單位就是設備獨立像素(`Device Independent Pixels`)簡稱`DIP`或`DP`。上面我們說，列表的寬度為`300`個像素，實際上我們可以說：列表的寬度為`300`個設備獨立像素。 ![](https://box.kancloud.cn/7987a7735ae1af98335a0f493e7654df_1110x960.png) 打開`chrome`的開發者工具，我們可以模擬各個手機型號的顯示情況，每種型號上面會顯示一個尺寸，比如`iPhone X`顯示的尺寸是`375x812`，實際`iPhone X`的分辨率會比這高很多，這里顯示的就是設備獨立像素。 ![](https://box.kancloud.cn/feabe3d19cb813b3c2183599901f0f8f_1280x694.png) ## 設備像素比設備像素比`device pixel ratio`簡稱`dpr`，即物理像素和設備獨立像素的比值。 在`web`中，瀏覽器為我們提供了`window.devicePixelRatio`來幫助我們獲取`dpr`。 在`css`中，可以使用媒體查詢`min-device-pixel-ratio`，區分`dpr`： ~~~ @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ } ~~~ 在`React Native`中，我們也可以使用`PixelRatio.get()`來獲取`DPR`。 當然，上面的規則也有例外，`iPhone 6、7、8 Plus`的實際物理像素是`1080 x 1920`，在開發者工具中我們可以看到：它的設備獨立像素是`414 x 736`，設備像素比為`3`，設備獨立像素和設備像素比的乘積并不等于`1080 x 1920`，而是等于`1242 x 2208`。 實際上，手機會自動把`1242 x 2208`個像素點塞進`1080 * 1920`個物理像素點來渲染，我們不用關心這個過程，而`1242 x 2208`被稱為屏幕的`設計像素`。我們開發過程中也是以這個`設計像素`為準。 實際上，從蘋果提出視網膜屏幕開始，才出現設備像素比這個概念，因為在這之前，移動設備都是直接使用物理像素來進行展示。 緊接著，`Android`同樣使用了其他的技術方案來實現`DPR`大于`1`的屏幕，不過原理是類似的。由于`Android`屏幕尺寸非常多、分辨率高低跨度非常大，不像蘋果只有它自己的幾款固定設備、尺寸。所以，為了保證各種設備的顯示效果，`Android`按照設備的像素密度將設備分成了幾個區間： ![](https://box.kancloud.cn/7e80d2b251510a8fb50dec2cfddcaf0f_1000x576.png) 當然，所有的`Android`設備不一定嚴格按照上面的分辨率，每個類型可能對應幾種不同分辨率，所以，每個`Android`手機都能根據給定的區間范圍，確定自己的`DPR`，從而擁有類似的顯示。當然，僅僅是類似，由于各個設備的尺寸、分辨率上的差異，設備獨立像素也不會完全相等，所以各種`Android`設備仍然不能做到在展示上完全相等。 ## 移動端開發在`iOS`、`Android`和`React Native`開發中樣式單位其實都使用的是設備獨立像素。 `iOS`的尺寸單位為`pt`，`Android`的尺寸單位為`dp`，`React Native`中沒有指定明確的單位，它們其實都是設備獨立像素`dp`。 在使用`React Native`開發`App`時，`UI`給我們的原型圖一般是基于`iphone6`的像素給定的。 為了適配所有機型，我們在寫樣式時需要把物理像素轉換為設備獨立像素：例如：如果給定一個元素的高度為`200px`(這里的`px`指物理像素，非`CSS`像素)，`iphone6`的設備像素比為`2`，我們給定的`height`應為`200px/2=100dp`。 當然，最好的是，你可以和設計溝通好，所有的`UI`圖都按照設備獨立像素來出。 我們還可以在代碼(`React Native`)中進行`px`和`dp`的轉換： ~~~ import {PixelRatio } from 'react-native'; const dpr = PixelRatio.get(); /** * px轉換為dp */ export function pxConvertTodp(px) { return px / dpr; } /** * dp轉換為px */ export function dpConvertTopx(dp) { return PixelRatio.getPixelSizeForLayoutSize(dp); } ~~~ ## WEB端開發在寫`CSS`時，我們用到最多的單位是`px`，即`CSS像素`，當頁面縮放比例為`100%`時，一個`CSS像素`等于一個設備獨立像素。 但是`CSS像素`是很容易被改變的，當用戶對瀏覽器進行了放大，`CSS像素`會被放大，這時一個`CSS像素`會跨越更多的物理像素。 `頁面的縮放系數 = CSS像素 / 設備獨立像素`。 ## 關于屏幕 `Retina`屏幕只是蘋果提出的一個營銷術語： > 在普通的使用距離下，人的肉眼無法分辨單個的像素點。 為什么強調`普通的使用距離下`呢？我們來看一下它的計算公式： ![](https://box.kancloud.cn/f3b837f9a4363f9eab893495deec90a0_170x26.png) `a`代表人眼視角，`h`代表像素間距，`d`代表肉眼與屏幕的距離，符合以上條件的屏幕可以使肉眼看不見單個物理像素點。 它不能單純的表達分辨率和`PPI`，只能一種表達視覺效果。 讓多個物理像素渲染一個獨立像素只是`Retina`屏幕為了達到效果而使用的一種技術。而不是所有`DPR > 1`的屏幕就是`Retina`屏幕。 比如：給你一塊超大尺寸的屏幕，即使它的`PPI`很高，`DPR`也很高，在近距離你也能看清它的像素點，這就不算`Retina`屏幕。 ![](https://box.kancloud.cn/d5df407d6341b387d6f75f83da143b6e_900x420.png) 我們經常見到用`K`和`P`這個單位來形容屏幕： `P`代表的就是屏幕縱向的像素個數，`1080P`即縱向有`1080`個像素，分辨率為`1920X1080`的屏幕就屬于`1080P`屏幕。 我們平時所說的高清屏其實就是屏幕的物理分辨率達到或超過`1920X1080`的屏幕。 `K`代表屏幕橫向有幾個`1024`個像素，一般來講橫向像素超過`2048`就屬于`2K`屏，橫向像素超過`4096`就屬于`4K`屏。 # 參考資料 [關于移動端適配，你必須要知道的](https://juejin.im/post/5cddf289f265da038f77696c)