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

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

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

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

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

　　需要注意的是，對于網(wǎng)頁中的文字和渲染出來的簡單圖形，系統(tǒng)在轉(zhuǎn)換時(shí)會(huì)確保畫面細(xì)膩;但是對于自己添加的圖片，在按照設(shè)備像素比放大后會(huì)變得模糊。為了解決這個(gè)問題，可以使用二倍圖來提高圖片顯示的質(zhì)量。