一、背景圖片
1、使用 media query判斷dpr（devicePixelRatio）-webkit-min-device-pixel-ratio
例子：
/* 普通顯示屏(設(shè)備像素比例小于等于1)使用1倍的圖 */
.css{
background-image: url(img_1x.png);
}
/* 高清顯示屏(設(shè)備像素比例大于等于2)使用2倍圖 */
@media only screen and (-webkit-min-device-pixel-ratio:2){
.css{
background-image: url(img_2x.png);
}
}
/* 高清顯示屏(設(shè)備像素比例大于等于3)使用3倍圖 */
@media only screen and (-webkit-min-device-pixel-ratio:3){
.css{
background-image: url(img_3x.png);
}
}
這里有相關(guān)工具 retina.js
2、使用image-set
使用的偽代碼如下
.css {
background-image: url(1x.png); /*不支持image-set的情況下顯示*/
background: -webkit-image-set(
url(1x.png) 1x,/* 支持image-set的瀏覽器的[普通屏幕]下 */
url(2x.png) 2x,/* 支持image-set的瀏覽器的[2倍Retina屏幕] */
url(3x.png) 3x/* 支持image-set的瀏覽器的[3倍Retina屏幕] */
);
}
其相比如media query的實(shí)現(xiàn)，image-set僅支持單個圖片的高清化，不適合在css sprite下使用。 并且兼容性也是一大硬傷。
image-set兼容性.png
二、普通圖片
1、srcset
MND描述
srcset有兩種用法，一個是像素密度描述符，一個是寬度描述符（使用寬度描述符會涉及到sizes屬性），兩種不能混用。
- 像素密度描述符
像素密度描述符很好理解：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Paste_Image.png
當(dāng)我選擇不同dpr時他就會顯示預(yù)先指定的不同圖片；例如1dpr它就會顯示400000000kernel.jpg （因?yàn)槲覀冊趕rcset中指定了400000000kernel.jpg 后的參數(shù)為1x），以此類推。。。
- 寬度描述符
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
上面代碼運(yùn)行后，當(dāng)我將瀏覽器窗口寬度大小調(diào)到400px及以下，瀏覽器顯示400000000kernel.jpg的圖片，調(diào)到401px-600px 顯示600000000kernel.jpg ，調(diào)到601px以上顯示12800000000kernel.jpg；
上面sizes="(max-width:400px) 100vw,100vw" 表示當(dāng)屏幕寬度小于及等于350px時，圖片寬度等于可視寬度的一般，大于350px則圖片寬度等于可視寬度；
srcset的兼容性如下：
srcset兼容性
三、icon類圖片
可采用svg或者iconfont等；
四、補(bǔ)充：
Paste_Image.png
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請注明出處。謝謝！ *
