杰晶网络

关于移动端小图标模糊问题的解决方法
网页制作 2024/11/23 佚名
3 2

前言

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

.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>

然后就变成下面这样，替换成功！

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

总结

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

标签：
移动端,小图标,模糊
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“关于移动端小图标模糊问题的解决方法”
暂无“关于移动端小图标模糊问题的解决方法”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/23

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网