码迷,mamicode.com
首页 > 移动开发 > 详细

移动端retina图片适配问题

时间:2017-03-25 20:20:34      阅读:224      评论:0      收藏:0      [点我收藏+]

标签: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(icon@2x.png) 2x);

}

 

2.srcset用在img标签里如:

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

 

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

 

移动端retina图片适配问题

标签:web   移动端   .com   分辨率   背景图   适配   back   css   png   

原文地址:http://www.cnblogs.com/sxw0511/p/6618031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!