网站设计小图片整合到一张透明png背景图，小图片多了会增加页面加载时间。但是png图片在移动端显示回变模糊，以为是图片分辨率的问题，提高到300像素也无效。
移动端使用的的Retina屏，如果是2xd Retina屏，移动端显示屏对图片进行放大两倍显示，可以用两张图片解决，比如：icon.png、icon@2x.png。
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;}
}
如果是，就写成这样
iPhone 6 Plus和iPhone 6S Plus是3x的Retina屏，笔者建议采用两倍屏的设计就行了，也就是如果p是50x50，图片就做成100x100。当然如果想兼容大屏幕，就按照3倍屏做，控制好图片大小就行。
实例代码(注意下面的红色部分样式)
nav ul li{float:left;width:25%;height:80px}
nav ul li span{display:block;text-align:center;line-height:25px;font-size:14px}
nav ul li a{display:block;width:100%;height:auto}
.n0 i,.n1 i,.n2 i,.n3 i{
display:block;
background-size:cover;
width:50px;height:50px;
background:url(/images/bj.png) no-repeat;/*背景图400x100*/
}
.n0 i{background-position:-0 0}
.n1 i{background-position:-50px 0 }
.n2 i{background-position:-100px 0}
.n3 i{background-position:-150px 0}
装修效果图装修预算装修区域装修流程
转载请注明来源网址：/news/1383.html
如果觉得《移动端大图缩放模糊_移动端png小图片显示模糊》对你有帮助，请点赞、收藏，并留下你的观点哦！
