<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.back{
height:51px;
width:51px;
background:-webkit-image-set(url('wechat.png') 1x,url("wechat@2x.png") 2x) center;
}
</style>
</head>
<body>
<!--
image-set解決蘋果的高平請顯示圖片問題
selector{
background-image:url(no-image-set.png);
background:image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
支持image-set:
如果你的瀏覽器支持image-set,而是普通屏下，此時瀏覽器選擇image-set中1x背景圖像
如果你的設備是高清屏幕下(ppi大於320時)時瀏覽器會選擇image-set中@2x背景圖像。
僅支持background-image屬性，而不能使用在'<img>'標簽中，老的安卓4.4以下的不支持
優點：image-set不需要告訴瀏覽器使用什么圖像，而是直接提供了圖像讓瀏覽器選擇
}
-->
<div class="back"></div>
</body>
</html>
@media標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.back{
height:51px;
width:51px;
background:url('wechat.png') no-repeat center;
background-size:100%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.back{
background:url('wechat@2x.png') no-repeat;
background-size:100%;
}
}
/* 當dpr為3時候也就是iphone6plus 是的時候加載這個圖片 */
@media only screen and (-webkit-min-device-pixel-ratio:3){
.back{
background:url('wechat@3x.png') no-repeat;
background-size:100%;
}
}
</style>
</head>
<body>
<!-- 缺點 直接給瀏覽器顯示特定的圖片，不靈活，假設在網速不好的情況下，體驗不好 -->
<div class="back"></div>
</body>
</html>
