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

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

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

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

好口碑IT培訓

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

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

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

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

在標準的viewport設置中,使用倍圖來提高圖片質量,解決在高清設備中的模糊問題。

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

 /* 在 iphone8 下面 */

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

多學一招:background-size實現背景縮放

background-size 屬性規定背景圖像的尺寸

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

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

cover把背景圖像擴展至足夠大,以使背景圖像完全覆蓋背景區域。

contain把圖像圖像擴展至最大尺寸,以使其寬度和高度完全適應內容區域





猜你喜歡:

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

win10系統Git安裝教程『純小白教程超詳細』

CSS是什么?CSS樣式規則

JS如何實現鼠標懸浮時表格對應行變色?

傳智教育前端與移動開發培訓

0 分享到:
红豆直播app黄台_红豆直播app下载免费_红豆直播app下载