關於移動端小圖示模糊問題的解決方法教程

前言

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

.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圖示的實際大小為20px，在pc端顯示基本正常：

然而一放到手機上，哎呀!圖示怎麼變模糊了?!

ok，既然圖片不夠清晰，那就用大一點的圖示唄，直接大小翻倍，用40px的上!

啥?還是有點模糊?

那就再大點……累不累?就沒有更好的解決方法麼?答案當然是有!

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

當然，SVG的具體語法本文就不詳述了，這裡就簡單講講上述例子如何直接將PNG點陣圖換成SVG向量圖：

1、點選進入IcoMoon，搜尋關鍵詞delete

2、選中刪除圖示

3、再點選底部左側按鈕切換到新頁面

4、此時可以點選圖示下方的文字“Get Code”，彈出對話方塊

對話方塊

5、先將Symbol Definition(s)部分程式碼取出，放在body內最前面的div中，div設定隱藏;再將HTML部分(SVG)取出代替原有PNG圖示;最後將CSS部分取出(根據需求稍做修改，如大小)放入樣式表。

 

 

/*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圖示都放在這裡面，其中每個symbol代表一個SVG圖示，然後在你需要使用圖示的地方使用透過xlink:href的方式根據id呼叫就好了，這個專業術語叫SVG Sprites，感覺比CSS Sprites方便多了，而且最關鍵是向量圖，怎麼放大縮小都不失真。

舉個例子吧~~

假如我現在需要把上面的圖示換掉，改成一個“×”，而又想保留之前圖示做備用，怎麼辦?

很簡單，直接將“×”的SVG程式碼新增到“SVG庫”中就好了，就像醬紫：

 

 

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

總結

以上就是關於移動端小圖示模糊問題的解決方法教程的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值。