如何解決移動(dòng)端小圖標(biāo)模糊的問題

發(fā)布時(shí)間：2021-07-12 14:04:11 來源：億速云閱讀：368 作者：小新欄目：移動(dòng)開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)如何解決移動(dòng)端小圖標(biāo)模糊的問題，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

前言

之前給大家講到圖片和文字垂直方向不對齊的問題，其中舉的小例子中用到了一個(gè)小圖標(biāo)，這個(gè)小圖標(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端顯示基本正常：

如何解決移動(dòng)端小圖標(biāo)模糊的問題

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

如何解決移動(dòng)端小圖標(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

如何解決移動(dòng)端小圖標(biāo)模糊的問題

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

如何解決移動(dòng)端小圖標(biāo)模糊的問題

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

如何解決移動(dòng)端小圖標(biāo)模糊的問題

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

如何解決移動(dòng)端小圖標(biāo)模糊的問題

對話框

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

<!--HTML部分-->
<body>
    <div style="display: none;">
        <!--作為一個(gè)可以按需取用的SVG庫-->
        <svg>
            <symbol id="icon-bin" viewBox="0 0 32 32">
                <title>bin</title>
                <path d="M4 10v20c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h3v14zM14 28h-2v-14h3v14zM18 28h-2v-14h3v14zM22 28h-2v-14h3v14z"></path>
                <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h36v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h7v1.975z"></path>
            </symbol>
        </svg>
    </div>
    <div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-bin"></use></svg><!--此處根據(jù)圖標(biāo)id按需調(diào)用--><span>刪除</span></div>
</body>

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

舉個(gè)栗子吧~~

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

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

<div style="display: none;">
    <!--作為一個(gè)可以按需取用的SVG庫-->
    <svg>
        <symbol id="icon-bin" viewBox="0 0 32 32">
            <title>bin</title>
            <path d="M4 10v20c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h3v14zM14 28h-2v-14h3v14zM18 28h-2v-14h3v14zM22 28h-2v-14h3v14z"></path>
            <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h36v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h7v1.975z"></path>
        </symbol>
        <!--新增圖標(biāo)-->
        <symbol id="icon-cross" viewBox="0 0 32 32">
            <title>cross</title>
            <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path>
        </symbol>
    </svg>
</div>
<div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-cross"><!--注意這里id名稱換了哦--></use></svg><span>刪除</span></div>

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

如何解決移動(dòng)端小圖標(biāo)模糊的問題

關(guān)于“如何解決移動(dòng)端小圖標(biāo)模糊的問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

如何解決移動(dòng)端小圖標(biāo)模糊的問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽