文章轉(zhuǎn)自：https://ydmgirls.com/posts/ex0f74
在作為 Web 開發(fā)人員的過程當(dāng)中，看到了許多 Web 開發(fā)人員都在努力理解如何在 Web 瀏覽器的高密度屏幕中處理 CSS 像素單元。 如今刊殉，高密度屏幕和視網(wǎng)膜屏幕已經(jīng)出現(xiàn)在所有移動設(shè)備和許多其他類型的設(shè)備上即碗。
這些新的高密度屏幕對我們 Web 開發(fā)人員來說是一個很大的痛點，因為當(dāng)我們構(gòu)建響應(yīng)式網(wǎng)站時从绘，我們不知道如何與屏幕分辨率相關(guān)聯(lián)游昼。 從這些新的高密度屏幕的角度來看，我們對像素是什么的理解變得不清楚辅鲸。
如前所述，我們正在處理兩種類型的分辨率：第一種分辨率是真實設(shè)備屏幕分辨率腹殿，第二種是 CSS 分辨率可測量單位独悴。 接下來讓我們更廣泛地闡述它們吧。
高密度屏幕的新時代
過去锣尉，這屏幕分辨率和 CSS 分辨率是完全一樣的刻炒。 但現(xiàn)在，在第一部智能手機開始流行的新時代——像 iPhone 4 和三星 Galaxy S1 這樣的設(shè)備自沧，它們是世界上第一個出現(xiàn)的高密度屏幕坟奥。
從那時起，高密度屏幕開始隨處可見拇厢，而不僅僅是在智能手機上爱谁。它適用于平板電腦等設(shè)備，例如 2012 年發(fā)布的第 3 代 iPad（新 iPad）孝偎，并且在過去幾年中访敌，幾乎所有類型的設(shè)備都可以看到高密度屏幕：筆記本電腦屏幕和臺式機屏幕 4k及以上屏幕開始出現(xiàn)。 如今衣盾，設(shè)備分辨率和 CSS 分辨率之間幾乎沒有相似之處寺旺。
CSS 分辨率和設(shè)備分辨率之間的真正區(qū)別是什么爷抓？
CSS 分辨率用于 CSS 規(guī)則中的測量，而屏幕設(shè)備分辨率是屏幕上的實際像素數(shù)阻塑。
除了這兩種分辨率類型蓝撇，還有密度顯示，密度顯示定義了屏幕分辨率和CSS分辨率之間的比例陈莽，在高密度屏幕中密度顯示是不同的渤昌。
例如：
在 iPhone 11 中，對于每個 CSS 像素走搁，對應(yīng)著 2 個設(shè)備像素耘沼，這意味著密度顯示為 2 倍。
在 iPhone 11 Pro 中朱盐，對于每個 CSS 像素群嗤，對應(yīng)著 3 個設(shè)備像素，這意味著密度顯示為 3 倍兵琳。
在三星 Galaxy S10 中狂秘，對于每個 CSS 像素，對應(yīng)著 4 個設(shè)備像素躯肌，這意味著密度顯示為 4 倍者春。
例子：
三星 Galaxy S10 分辨率：
設(shè)備分辨率 — 1440 像素 x 3040 像素
CSS 分辨率 — 360 像素 x 760 像素
密度顯示 - 4x（密度顯示為 4 倍）
為什么 CSS 像素不等于設(shè)備像素？
如果在高密度屏幕時代之前的那些年里清女，CSS 像素和設(shè)備像素是相同的钱烟，為什么互聯(lián)網(wǎng)行業(yè)會在它們之間產(chǎn)生差異呢？
答案很簡單嫡丙，因為它必須這么做拴袭！ 為什么必須這樣做？ 讓我們以三星 Galaxy S10 等設(shè)備為例曙博，其設(shè)備屏幕分辨率為 1440 像素 x 3040 像素拥刻。 這與普通筆記本電腦屏幕的分辨率相同，但它顯示在小型設(shè)備上父泳。 如果我們沒有 CSS 分辨率和設(shè)備分辨率之間的這種差異般哼，桌面網(wǎng)站將在移動設(shè)備上以全寬顯示，我們無法創(chuàng)建真正的響應(yīng)式網(wǎng)站惠窄，因為我們無法區(qū)分應(yīng)該影響移動站點的樣式和應(yīng)該影響桌面的樣式蒸眠。
如果我們不使用設(shè)備分辨率，它的目的是什么杆融？
我們已經(jīng)得出結(jié)論楞卡，我們在 CSS 中使用 CSS 分辨率作為度量單位。 那么，我們什么時候參考設(shè)備分辨率臀晃？
設(shè)備分辨率的目的是作用于屏幕媒體、圖像和視頻上介劫。
憑借這些高密度屏幕的額外像素徽惋，我們可以為這些設(shè)備提供更高密度的圖像和視頻，從而為這些媒體創(chuàng)建更清晰的視圖座韵。 是的险绘，這意味著在三星 Galaxy S10 中，例如誉碴，針對 CSS 分辨率為 300 像素的圖像宦棺，您可以加載高達 1200 像素的圖像！ 例子：
<img src="image-size-1200px" width="300" alt="">
好啦黔帕，以上就是CSS 分辨率和設(shè)備分辨率之間的區(qū)別代咸。
