網(wǎng)站設(shè)計(jì)小圖片整合到一張透明png背景圖，小圖片多了會(huì)增加頁面加載時(shí)間。但是png圖片在移動(dòng)端顯示回變模糊，以為是圖片分辨率的問題，提高到300像素也無效。

移動(dòng)端使用的的Retina屏，如果是2xd Retina屏，移動(dòng)端顯示屏對圖片進(jìn)行放大兩倍顯示，可以用兩張圖片解決，比如：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屏，筆者建議采用兩倍屏的設(shè)計(jì)就行了，也就是如果p是50x50，圖片就做成100x100。當(dāng)然如果想兼容大屏幕，就按照3倍屏做，控制好圖片大小就行。

實(shí)例代碼(注意下面的紅色部分樣式)

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(http://www.v25j.com/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}

• 裝修效果圖
• 裝修預(yù)算
• 裝修區(qū)域
• 裝修流程

轉(zhuǎn)載請注明來源網(wǎng)址：http://www.maimuban.com/news/1383.html

總結(jié)

以上是生活随笔為你收集整理的移动端大图缩放模糊_移动端png小图片显示模糊的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。