前言

之前給大家講到圖片和文字垂直方向不對(duì)齊的問(wèn)題，其中舉的小例子中用到了一個(gè)小圖標(biāo)，這個(gè)小圖標(biāo)我用的是背景圖來(lái)顯示：

.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px; vertical-align: middle; background: url("imgs/delete.png") no-repeat center; background-size: 100%;}

delete.png圖標(biāo)的實(shí)際大小為20px，在pc端顯示基本正常：

然而一放到手機(jī)上，哎呀!圖標(biāo)怎么變模糊了?!

ok，既然圖片不夠清晰，那就用大一點(diǎn)的圖標(biāo)唄，直接大小翻倍，用40px的上!

啥?還是有點(diǎn)模糊?

那就再大點(diǎn)……累不累?就沒(méi)有更好的解決方法么?答案當(dāng)然是有!

用矢量圖放上，也就是SVG要出場(chǎng)了！

當(dāng)然，SVG的具體語(yǔ)法本文就不詳述了，這里就簡(jiǎn)單講講上述例子如何直接將PNG位圖換成SVG矢量圖：

1、點(diǎn)擊進(jìn)入IcoMoon，搜索關(guān)鍵詞delete

2、選中刪除圖標(biāo)

3、再點(diǎn)擊底部左側(cè)按鈕切換到新頁(yè)面

4、此時(shí)可以點(diǎn)擊圖標(biāo)下方的文字“Get Code”，彈出對(duì)話框

對(duì)話框

5、先將Symbol Definition(s)部分代碼取出，放在body內(nèi)最前面的div中，div設(shè)置隱藏;再將HTML部分(SVG)取出代替原有PNG圖標(biāo);最后將CSS部分取出(根據(jù)需求稍做修改，如大小)放入樣式表。

/*CSS部分*/.del{ font-size: 20px;}.del .icon{ display: inline-block; width: 20px; height: 25px; margin-right: 5px; vertical-align: middle; fill: currentColor;}.del span{ vertical-align: middle;}

以上CSS部分就不做解釋了，這里簡(jiǎn)單說(shuō)下HTML部分。

上面隱藏的那部分SVG可以看做是一個(gè)SVG庫(kù)，你可以將頁(yè)面中需要用到的SVG圖標(biāo)都放在這里面，其中每個(gè)symbol代表一個(gè)SVG圖標(biāo)，然后在你需要使用圖標(biāo)的地方使用通過(guò)xlink:href的方式根據(jù)id調(diào)用就好了，這個(gè)專業(yè)術(shù)語(yǔ)叫SVG Sprites，感覺(jué)比CSS Sprites方便多了，而且最關(guān)鍵是矢量圖，怎么放大縮小都不失真。

舉個(gè)栗子吧~~

假如我現(xiàn)在需要把上面的圖標(biāo)換掉，改成一個(gè)“×”，而又想保留之前圖標(biāo)做備用，怎么辦?

很簡(jiǎn)單，直接將“×”的SVG代碼添加到“SVG庫(kù)”中就好了，就像醬紫：

然后就變成下面這樣，替換成功!

總結(jié)

以上就是關(guān)于移動(dòng)端小圖標(biāo)模糊問(wèn)題的解決方法教程的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值。