物理像素比在移動端開發(fā)的時候至關(guān)重要,那什么是物理像素和物理像素比?
什么是物理像素？
物理像素,通俗一點來說就是手機(jī)售賣的時候上架所說的屏幕分辨率,比如這里的iPhone X 屏幕的分辨率就是1125 * 2436
image.png
什么是物理像素比？
物理像素比指的是一個px能顯示的物理像素點的個數(shù),稱為物理像素比或者屏幕像素比,拿iPhone X來說,拿一個375*812的盒子就可以將整個iPhone屏幕填滿,所以物理像素比就是1125/375=3.0
image.png
圖片在物理和物理像素比之下的影響
假設(shè)一張圖的大小是50px*50px,在iPhone X 下 物理像素比是1:3,也就是原來的50px被放大了3倍,現(xiàn)在變成了150px。在純色的背景下沒有什么影響，但是圖片就會變得很模糊。
有效解決圖像放大模糊的方法
1.插入圖片
多倍圖，可以有效地解決圖像放大模糊的情況，具體的做法如下：
- 原本的圖片是50px50px，觀察到iPhone x物理像素比是3倍，這里準(zhǔn)備一張 150px150px的圖片
2.將圖片手動調(diào)成50px*50px，這樣在放的的時候就不會變得模糊
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>多倍圖</title>
<style>
img:last-child {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<img src="images/apple50(1).jpg" alt="">
<img src="images/apple100.jpg" alt="">
</body>
</html>
效果圖：
二倍圖對比
背景圖的解決方法
2.背景圖縮放的做法
以上只是插入圖片的做法，下面還有背景圖的做法
- background-size
/* 這樣是設(shè)置寬度和高度，可能會造成圖片變形 */
background-size: 100px, 100px;
/* 是根據(jù)父盒子來說的，顯示為父盒子的一半 */
background-size: 50%;
/* 設(shè)置寬度為100px，高度會跟著等比例縮放 */
background-size: 100px;
/* 等比例拉伸，完全覆蓋父盒子，可能會導(dǎo)致圖像顯示不全的問題 */
background-size: cover;
/* 等比例拉伸，往外延伸，寬度和高度一邊到了就不會在擴(kuò)展了，可能會有一部分空白 */
background-size: contain;
背景圖縮放案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景圖2倍縮放案例</title>
<!-- 1.首先準(zhǔn)備一個2倍圖
2.將這個二倍圖縮放成1倍大小,這樣就不會模糊了 background-size-->
<style>
div {
width: 50px;
height: 50px;
border: 1px solid red;
background: url(images/apple100.jpg) no-repeat;
background-size: 50px 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
