首頁常見問題正文

移動Web開發(fā)基礎(chǔ)：設(shè)備像素比是什么?

更新時間:2022年07月25日16時22分來源:傳智教育瀏覽次數(shù):

好口碑IT培訓(xùn)

　　在傳統(tǒng)的PC端和早期的普通手機中，屏幕上的一個像素和網(wǎng)頁CSS中的一個像素是完全對應(yīng)的。但隨著技術(shù)的進步，為了提高屏幕顯示的細膩度，高分辨率的屏幕開始流行，一塊屏幕可以顯示更多的像素。但隨之產(chǎn)生了一個問題，就是同一個網(wǎng)頁在不同分辨率的屏幕下顯示效果會有大小差異，因為CSS中使用的像素是一個固定值，它不會因為屏幕分辨率而發(fā)生改變。例如，在屏幕尺寸相同的情況下，一個12px的文字在低分辨率的屏幕中尺寸很大，但在高分辨率的屏幕中，文字會顯得特別小，不利于瀏覽。

　　為了解決這個問題，高分辨率設(shè)備的操作系統(tǒng)會對網(wǎng)頁畫面進行縮放，讓網(wǎng)頁內(nèi)容大小看上去比較舒適，而網(wǎng)頁中使用的像素并不做修改。尤其是網(wǎng)頁中的文字，在高分辨率屏幕下的顯示效果會更加細膩。因此，在高分辨率屏幕中，CSS使用的像素單位和屏幕顯示的像素并不是一對一的，將屏幕像素除以CSS像素得到的就是設(shè)備像素比。

　　例如，當設(shè)備像素比為4時，CSS像素和屏幕像素的轉(zhuǎn)換關(guān)系如圖2-14所示。

CSS像素和屏幕像素的轉(zhuǎn)換關(guān)系