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

互联网   发布时间:2017-10-09 14:43:33   作者:璿而不华   我要评论

由于移动端的屏幕大小不一,所以我们在做移动端页面的时候,在不同分辨率的手机屏幕下,手机端的图片会显示模糊不清,严重影响了用户体验,所以这篇文章主要给大家介绍了关于移动端小图标模糊问题的解决方法,需要的朋友可以参考借鉴,下面来一起看看吧。

前言

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

.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部分取出(根据需求稍做修改,如大小)放入样式表。

<!--HTML部分-->
<body>
    <div style="display: none;">
        <!--作为一个可以按需取用的SVG库-->
        <svg>
            <symbol id="icon-bin" viewBox="0 0 32 32">
                <title>bin</title>
                <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></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.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
            </symbol>
        </svg>
    </div>
    <div class="del"><svg class="icon icon-bin"><use xlink:href="#icon-bin"></use></svg><!--此处根据图标id按需调用--><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可以看做是一个SVG库,你可以将页面中需要用到的SVG图标都放在这里面,其中每个symbol代表一个SVG图标,然后在你需要使用图标的地方使用通过xlink:href的方式根据id调用就好了,这个专业术语叫SVG Sprites,感觉比CSS Sprites方便多了,而且最关键是矢量图,怎么放大缩小都不失真。

举个栗子吧~~

假如我现在需要把上面的图标换掉,改成一个“×”,而又想保留之前图标做备用,怎么办?

很简单,直接将“×”的SVG代码添加到“SVG库”中就好了,就像酱紫:

<div style="display: none;">
    <!--作为一个可以按需取用的SVG库-->
    <svg>
        <symbol id="icon-bin" viewBox="0 0 32 32">
            <title>bin</title>
            <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></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.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
        </symbol>
        <!--新增图标-->
        <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>

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

相关文章

  • 详解Web前端性能优化详解之资源合并与压缩

    这篇文章主要介绍了详解Web前端性能优化详解之资源合并与压缩,详细的介绍资源合并与压缩的案例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来
    2018-06-19
  • 浅谈网页基本性能优化规则小结

    这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-07
  • Vendor Prefix:为什么需要浏览器引擎前缀

    Vendor prefix—浏览器引擎前缀,是一些放在CSS属性前的小字符串,用来确保这种属性只在特定的浏览器渲染引擎下才能识别和生效,,需要的朋友可以参考下
    2018-06-03
  • 浅谈雅虎前端优化的35条军规

    无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢,这篇文章主要介绍了浅谈雅虎前端优化的35条军规,感兴趣的小伙伴
    2018-05-22
  • 百度站内搜索不支持https的解决方法(已测试)

    这篇文章主要介绍了百度站内搜索不支持https的解决方法,需要的朋友可以参考下
    2018-02-07
  • Https页面使用百度分享的解决方法

    详情页面使用了百度分享,导致http和https混用,可爱的小绿锁没了。所以我们必须修正它。已经有人处理了这个问题,所以我们直接做伸手党即可
    2018-02-07
  • 用 // 代替 http:// 有什么好处(自适应https)

    随着国内运营商等的大肆劫持导致大家在访问网站的时候插入大量的低俗广告,降低用户体验,所以各大搜索引擎都希望大家尽量将站点转换为https方式
    2018-02-06
  • 引入css的四种方式总结(分享)

    下面小编就为大家分享一篇引入css的四种方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-04
  • 移动端开发教程之像素的显示问题汇总

    最近在开发中,发现了移动端像素的一些问题,是之前一直没注意过的,这篇文章主要给大家介绍了关于移动端开发教程之像素显示问题的相关资料,文中通过示例代码介绍的非常详
    2017-12-11
  • 浅谈移动端的自适应布局问题(响应式、rem/em、Js动态)

    本篇文章主要介绍了浅谈移动端的自适应问题(响应式、rem/em、Js动态),非常具有实用价值,需要的朋友可以参考下
    2017-11-01

最新评论