什么是物理像素？什么是物理像素比？

物理像素點指的是屏幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設(shè)置好了,比如蘋果6\7\8 是 750* 1334。我們開發(fā)時候的1px，PC端頁面是1個px 等于1個物理像素，但是移動端就不盡相同，一個px的能顯示的物理像素點的個數(shù)，稱為物理像素比或屏幕像素比。

PC端 和 早前的手機(jī)屏幕 / 普通手機(jī)屏幕: 1CSS像素 = 1 物理像素的

Retina(視網(wǎng)膜屏幕)是一種顯示技術(shù)，可以將把更多的物理像素點壓縮至一塊屏幕里，從而達(dá)到更高的分辨率，并提高屏幕顯示的細(xì)膩程度。

對于一張 50px * 50px 的圖片,在手機(jī) Retina 屏中打開，按照剛才的物理像素比會放大倍數(shù)，這樣會造成圖片模糊。

在標(biāo)準(zhǔn)的viewport設(shè)置中，使用倍圖來提高圖片質(zhì)量，解決在高清設(shè)備中的模糊問題。

通常使用二倍圖， 因為iPhone 6\7\8 的影響,但是現(xiàn)在還存在3倍圖4倍圖的情況，這個看實際開發(fā)公司需求? 背景圖片 注意縮放問題。

 /* 在 iphone8 下面 */

 img {
     /*原始圖片100*100px*/
     width: 50px;
     height: 50px;
 }
 .box {
     /*原始圖片100*100px*/
     background-size: 50px 50px;
 }

多學(xué)一招：background-size實現(xiàn)背景縮放

background-size 屬性規(guī)定背景圖像的尺寸

background-size: 背景圖片寬度 背景圖片高度

單位： 長度|百分比|cover|contain; 

cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。

contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域

為什么要使用二倍圖？二倍圖使用教程

win10系統(tǒng)Git安裝教程『純小白教程超詳細(xì)』

CSS是什么？CSS樣式規(guī)則

JS如何實現(xiàn)鼠標(biāo)懸浮時表格對應(yīng)行變色？

傳智教育前端與移動開發(fā)培訓(xùn)