移動端retina圖片適配問題

標籤：web   移動端   .com   解析度   背景圖   適配   back   css   png   

作用是：為了能夠使得不同解析度的不同瀏覽器使用者提供適合瀏覽環境的圖片大小的解決方案，之前的解決方案是@media

1.image-set用在css背景圖上如：

.box{

　　background-image:url(icon.png) 0 0 no-repeat;

　　background-image:-webkit-image-set(url(icon.png) 1x,url([email protected]) 2x);

}

 

2.srcset用在img標籤裡如：

<img src="icon.png" srcset="[email protected] 2x">

 

可參考 http://www.css88.com/book/css/values/image/image-set().htm

 

移動端retina圖片適配問題