html - 为什么png小图标在移动端中显示异常模糊呢？
本文介绍了html - 为什么png小图标在移动端中显示异常模糊呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
为什么png小图标在移动端中显示异常模糊呢？
解决方案
因为移动端是Retina屏幕呀！
假设图标icon.png是16x16, 设备是2x的Retina屏，那么你得准备一个icon@2x.png，分辨率是32x32，这么写CSS：
.icon {
background-image: url(images/icon.png);
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2) {
.icon {
background-image: url(images/icon@2x.png);
background-size: 16px 16px;
}如果是用<img>，可以这样写：
<img src="images/icon.png" srcset="images/icon@2x.png 2x">当然iPhone 6 Plus和iPhone 6S Plus是3x的Retina屏，如果要兼容，就要更多图啦
这篇关于html - 为什么png小图标在移动端中显示异常模糊呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
