关于移动端小图标模糊问题的解决方法教程

2019-01-14 10:59 手机中国
2 0

前言

之前给大家讲到图片和文字垂直方向不对齐的问题,其中举的小例子中用到了一个小图标,这个小图标我用的是背景图来显示:

.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库”中就好了,就像酱紫:

 

删除

 

然后就变成下面这样,替换成功!

总结

以上就是关于移动端小图标模糊问题的解决方法教程的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值。

收藏 举报

延伸 · 阅读