移動端retina圖片適配問題

做用是:爲了可以使得不一樣分辨率的不一樣瀏覽器用戶提供適合瀏覽環境的圖片大小的解決方案,以前的解決方案是@mediacss

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

.box{瀏覽器

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

  background-image:-webkit-image-set(url(icon.png) 1x,url(icon@2x.png) 2x);spa

}htm

 

2.srcset用在img標籤裏如:圖片

<img src="icon.png" srcset="icon@2x.png 2x">it

 

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

相關文章
相關標籤/搜索