關(guān)于移動端小圖標(biāo)模糊問題的解決方法教程

2019-01-14 10:59:47 來源：手機(jī)中國作者：佚名 人氣： 次閱讀 513 條評論

由于移動端的屏幕大小不一，所以我們在做移動端頁面的時候，在不同分辨率的手機(jī)屏幕下，手機(jī)端的圖片會顯示模糊不清，嚴(yán)重影響了用戶體驗(yàn)，所以這篇文章主要給大家介紹了關(guān)于移動端小圖標(biāo)模糊問題的解決方法，需要的朋友可以參考借鑒，下面來一起看看吧。...

前言

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

.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)……累不累?就沒有更好的解決方法么?答案當(dāng)然是有!

用矢量圖放上，也就是SVG要出場了！

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

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

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

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

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

對話框

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部分就不做解釋了，這里簡單說下HTML部分。

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

舉個栗子吧~~

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

很簡單，直接將“×”的SVG代碼添加到“SVG庫”中就好了，就像醬紫：

 

刪除

 

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

總結(jié)

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