一辈挂、背景圖片
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僅支持單個(gè)圖片的高清化蜂林，不適合在css sprite下使用。 并且兼容性也是一大硬傷拇泣。
image-set兼容性.png
二噪叙、普通圖片
1、srcset
MND描述
srcset有兩種用法霉翔，一個(gè)是像素密度描述符睁蕾，一個(gè)是寬度描述符（使用寬度描述符會(huì)涉及到sizes屬性），兩種不能混用债朵。
- 像素密度描述符
像素密度描述符很好理解：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
Paste_Image.png
當(dāng)我選擇不同dpr時(shí)他就會(huì)顯示預(yù)先指定的不同圖片子眶；例如1dpr它就會(huì)顯示400000000kernel.jpg （因?yàn)槲覀冊(cè)趕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時(shí)，圖片寬度等于可視寬度的一般蝌麸，大于350px則圖片寬度等于可視寬度点寥；
srcset的兼容性如下：
srcset兼容性
三、icon類圖片
可采用svg或者iconfont等来吩；
四敢辩、補(bǔ)充：
Paste_Image.png
**本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有蔽莱，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝戚长！ *
