css3處理sprite背景圖壓縮來解決H5網頁在手機瀏覽器下圖標模糊的問題_html/css

來源：懂視網責編：小采時間：2020-11-27 16:06:47

css3處理sprite背景圖壓縮來解決H5網頁在手機瀏覽器下圖標模糊的問題_html/css

css3處理sprite背景圖壓縮來解決H5網頁在手機瀏覽器下圖標模糊的問題_html/css_WEB-ITnose:最近在負責一個微信H5 App項目，遇到一個郁悶的問題，手機瀏覽器查看網頁時圖標都是模糊的，有鋸齒，電腦瀏覽器顯示則是正常。大概知道是分辨率適配等類型的問題，后來網上查找了一些辦法，大部分的解決方案都是設計一套放大1倍的圖標，再壓縮顯示。我們都知

推薦度：

點擊下載本文 文檔為doc格式

導讀css3處理sprite背景圖壓縮來解決H5網頁在手機瀏覽器下圖標模糊的問題_html/css_WEB-ITnose:最近在負責一個微信H5 App項目，遇到一個郁悶的問題，手機瀏覽器查看網頁時圖標都是模糊的，有鋸齒，電腦瀏覽器顯示則是正常。大概知道是分辨率適配等類型的問題，后來網上查找了一些辦法，大部分的解決方案都是設計一套放大1倍的圖標，再壓縮顯示。我們都知

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

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

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

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

（map-icon.png）

(map-icon@2x.png)

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

/* //網頁標簽： *//* 裝載圖標的容器，固定寬高，內距設為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屬性值要設置為多少？后來找到有一個公式：

高分辨率圖像寬度 / 目標圖像寬度 = X原始Sprites圖像寬度 / x = background-size的寬度值

好吧，公式的原理我們就不在這里展開了，直接寫上去試試：

60 / 30 = 2 即放大倍數

7張60x60的大圖總寬度 420

420 / 2 = 210 即background-size的寬

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

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

/* 移動端媒體查詢像素比 */@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自適應，但我嘗試過，不太容易成功。我們以后就直接用一行圖標排開，給背景圖寬賦值就行了！

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

（處理前）

（處理后）

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com