最近在負責(zé)一個微信H5 App項目，遇到一個郁悶的問題，手機瀏覽器查看網(wǎng)頁時圖標都是模糊的，有鋸齒，電腦瀏覽器顯示則是正常。大概知道是分辨率適配等類型的問題，后來網(wǎng)上查找了一些辦法，大部分的解決方案都是設(shè)計一套放大1倍的圖標，再壓縮顯示。

我們都知道

標簽可以通過固定寬高的方式來壓縮大圖，從而得到高清的顯示效果，而圖標一般用背景圖來呈現(xiàn)，怎么搞呢？好吧，css3出了一個很牛逼的屬性background-size可以直接設(shè)置背景圖的寬高，直接解決了前者的疑惑。

那么問題來了，我們的網(wǎng)頁不可能每個圖標都獨立一張圖片來加載，那樣每張圖片將會是一個http請求開銷，我們一般的做法是把多張小圖片拼在一張大圖里，然后通過sprite(精靈)background-position定位的方法來解決，只要加載一張大圖，就可以完成多個圖標的顯示，減少http請求開銷，提高性能。所以，我們也希望把放大1倍的高清圖標也拼在一張大圖里，通過background-position來定位到每個對應(yīng)的圖標上，并進行壓縮。網(wǎng)上找了很多方法，終于找到了一個靠譜的方案：

1)首先，我們要準備兩張排成一行(必須排成一行，下面解釋)的圖片，一張是原始大小，另一張是放大1倍的大小

(map-icon.png)

(map-icon@2x.png)

2) 最初的寫法，主要是在電腦瀏覽器上顯示，我們使用原圖map-icon.png即可

/* //網(wǎng)頁標簽： *//* 裝載圖標的容器，固定寬高，內(nèi)距設(shè)為0 */.control { display: block; text-decoration: none; padding: 0; width: 30px; height: 30px; }/* 圖標標簽，寬高自動填充 */.car,.position,.zoom-in,.zoom-out {display: block; width: 100%; height: 100%; background: url(images/map-icon.png) no-repeat;}.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }

3) 問題是，我們怎么知道background-size屬性值要設(shè)置為多少？ 后來找到有一個公式：

高分辨率圖像寬度 / 目標圖像寬度 = X原始Sprites圖像寬度 / x = background-size的寬度值 好吧，公式的原理我們就不在這里展開了，直接寫上去試試：

60 / 30 = 2 即放大倍數(shù)

7張60x60的大圖總寬度 420

420 / 2 = 210 即background-size的寬

而background-size的高，我們這里設(shè)置為auto即可，然后換上@2x的大圖進行壓縮

還有，我們必須在外層聲明一個Media Queries，該Media Queries專門針對Retina屏幕設(shè)備顯示器

/* 移動端媒體查詢像素比 */@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) {.car,.position,.zoom-in,.zoom-out {background: url(images/map-icon@2x.png) no-repeat; background-size: 210px auto;}/* 注意這里還是按30像素大小的位置來查找 */.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }} 相反，貌似也可以給定高度的值，寬度取auto自適應(yīng)，但我嘗試過，不太容易成功。我們以后就直接用一行圖標排開，給背景圖寬賦值就行了！

最后，給出使用此方案的前后效果圖：

(處理前)

(處理后)

聲明：本文原創(chuàng)發(fā)布php中文網(wǎng)，轉(zhuǎn)載請注明出處，感謝您的尊重！如有疑問，請聯(lián)系admin@php.cn處理

總結(jié)

以上是生活随笔為你收集整理的手机html图片模糊,css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WEB-ITnose...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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