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

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

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

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

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

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

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

 /* 在 iphone8 下面 */

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

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

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

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

單位： 長(zhǎng)度|百分比|cover|contain; 

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

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

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

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

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

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

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