教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2021年12月14日11時32分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

物理像素點指的是屏幕顯示的最小顆粒,是物理真實存在的。這是廠商在出廠時就設(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)

0 分享到:
和我們在線交談!