移动端大图缩放模糊_关于移动端小图标模糊问题的解决方法
前言
之前给大家讲到图片和文字垂直方向不对齐的问题，其中举的小例子中用到了一个小图标，这个小图标我用的是背景图来显示：
.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库”中就好了，就像酱紫：
然后就变成下面这样，替换成功！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章：
T-SQL WITH 分号问题
使用with 前面有sql语句时候 运行 with tempTbale(id) as ( select ..... )select * from tempTbale 运行上面语句 提示下面错误 Incorrect syntax near the keyword with. If this statement is a common table expression, an xmlnamespaces clause or a change tracking con…
SVN 撤回（回滚）提交的代码
转： SVN 撤回（回滚）提交的代码 2016年12月20日 17:20:58 怀色 阅读数 68614 标签： svn svn回滚 版本回滚 更多 个人分类： svn 版权声明：本文为博主原创文章，未经博主允许不得转载。 https://…
LTE-怎么获取上行资源
LTE中，UE如果要发送上行数据(Control sig or Data)，需要上行pusch资源，如果没有被分配pusch的话，则需要申请。 有3种方法进行申请： 这3中方法对应不同的场景，详细逻辑如下：
mysql中sql语句
<数据定义语言DDL> 一. create TABLE tableName 创建表 二. alter TABLE tableName 修改表 三. drop TBALE tableName 删除表 <数据控制语言DCL> GRANT/REVOKE <数据操纵语言DML> 一. insert INTO tableName(,,,) values(,,,); 插入数据(增) 二. update tabl…
wxpython有没有可视化设计_wxPython - GUI Builder工具( GUI Builder Tools)
wxPython - GUI Builder工具( GUI Builder Tools)通过手动编码创建美观的GUI可能很乏味。 可视化GUI设计器工具总是很方便。 许多针对wxPython的GUI开发IDE都可用。 以下是其中一些 -wxFormBuilderwxDesignerwxGladeBoaConstructorgui2pywxFormBuilder是一个开源的，…
微信网页JSDK接口-wx.chooseImage问题
wx.chooseImage({count: 1, // 默认9sizeType: [original, compressed], // 可以指定是原图还是压缩图，默认二者都有sourceType: [album, camera], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds res.localIds; //…
ARM 的几个重要特点
ARM 采用RISC指令集 ARM: Acorn RISC Machine; //Acorn: 公司的名字 它支持的指令比较简单，所以功耗小、价格便宜，特别合适移动设备。 RISC 和CISC的区别： 举例子，乘加运算，比如： ya*b c; 在CISC里面…
html文字中横线_谈PPT课件中自定义动画应用之内容控制
本案例来源于一位资深政治教师的课件应用经验。在她的朋友圈看到：讲解高考政治主观题课件要这样做才好，材料全部显示完后，再把一些关键字词句用彩色字标注或横线或圆圈标注，然后再分析归纳，哪些字词句是设问范围内应该…
PowerShell过滤文件中的重复内容
Get-Content -Path E:\test11\data.txt | Sort-Object | Get-Unique 源文件： AA0001 2014-06-30 15:27:13.073 AA0001 2014-06-30 15:27:13.073 AA0001 2014-06-30 15:27:13.073 AA0002 2014-06-30 15:27:30.607 AA0002 2014-06-30 15:28:00.467 AA0003 2014-06-30 …
pstree进程管理
功能：pstree命令列出当前的进程，以及它们的树状结构。 格式：pstree [选项] [pid|user] 主要选项如下： -a：显示执行程序的命令与完整参数。 -c：取消同名程序，合并显示。 -h：对输出结果…
LTE MIB 的发送周期
MIB在PBCH上发送，PBCH 采用QPSK调制。 PBCH的时频资源位置固定，可以参考我的博文” LTE FDD PSS/SSS/MIB时频资源位置”. 一个SFN发送一次MIB，接下来3个SFN重复发送同样的信息(但是以不同的扰码加扰)，也就是说MIB的发送周期为4…
吸顶wifi_分享 | 酒店WiFi网络的三种部署模式
酒店的无线网络，在酒店部署移动网络业务的时候，很多酒店会发现实际效果远达不到预期。酒店员工和入住用户经常会抱怨无线网络不稳定、视频无限缓冲中、经常掉线……，那么今天我们来了解酒店无线网络的部署。一、影响WiFI漫游的因素导致出现以…
最后一片蓝海的终极狂欢-写在Win10发布前夕
作为一名Windows8.x系统平台从业者，从工作伊始，耳边不断充斥着Windows将走向没落的言论，Win10今日晚些时候即将发布，笔者借此机会，说说自己的看法。 早在2012年的时候，IDC曾预测，WP系统将在2016…
错误信息输出，重定向到文件
将错误重定向到文件remove-item none 2> d:\ee.txt 将错误追加到已有文件remove-item none 2>> d:\ee.txt 将错误发送到成功输出流。如果报错后，代码依然继续执行，则Exception不会被捕获到$myerror Remove-Item "NoSuchDirectory" 2…
spark-submit --files 动态加载外部资源文件
在做spark时，有些时候需要加载资源文件，需要在driver或者worker端访问。在client模式下可以使用IO流直接读取,但是在cluster模式下却不能直接读取，需要如下代码： val is: InputStream this.getClass.getResourceAsStream(“./xxx…
LTE SIB1时频资源
1.时域资源 参考3GPP 36.331 – 5.2.1.2Scheduling The SystemInformationBlockType1 uses a fixed schedule with a periodicity of 80 msand repetitions made within80 ms. Thefirst transmission of SystemInformationBlockType1 is scheduled insubframe #5 of radio fram…
ssm框架mysql配置_ssm框架使用详解配置两个数据源
学习ssm框架已经快一年了，今天把这个框架总结一下。SSM 就是指 spring、SpringMVC和Mybatis。先说一下基本概念(百度上搜的)1、基本概念1.1、SpringSpring是一个开源框架，Spring是于2003 年兴起的一个轻量级的Java 开发框架，由Rod Johnson 在…
Linux下JDK环境的配置
whereis javawhich java （java执行路径）echo $JAVA_HOME rpm -ivh jdk-7u79-linux-x64.rpm 配置profile 转载于:https://www.cnblogs.com/xubc/p/4686748.html
org.springframework.jdbc.BadSqlGrammarException: CallableStatementCallback; bad SQL grammar
通过Spring的jdbcTemplate调用Mysql的存储过程，出现下面的问题（以前也使用过，并没有出现下面的问题，折腾大半天，郁闷）：开始报下面的错误：[INFO ]2014-07-01 10:49:15,297 MESSAGE : …
Aras学习笔记（1）学习Aras已半年有余，也积攒一些学习笔记，今天起会陆续分享出来，有兴趣的朋友一起交流...
Aras Innovator PLM简介 美国Aras公司的产品生命周期（PLM）软件。Aras Innovator是微软在PLM领域唯一的一家金牌合作伙伴。是全球首款达到CMII 4星级的开放许可的企业级PLM(OPEN PLM)产品。通过软件许可（节点）免费，服务…
LTE CRS 时频资源
1. 参考 Spec 3GPP-36.211-6.10 Cell-specificReference Signal (CRS) Cell-specificreference signals are transmitted on one or several of antenna ports 0 to 3. Cell-specific reference signals are defined for Δf 15 kHzonly 2. 时频位置公式 在36.211-6.10.1.…
wcf客户端捕获异常
直接使用Exception进行捕获，然后在监视器中查看具体是哪一个异常 System.Exception {System.ServiceModel.Security.MessageSecurityException} 查看StackTrace Server stack trace: 在 System.ServiceModel.Channels.SecurityChannelFactory1.SecurityRequestChan…
java监听mysql_java实时监控mysql数据库变化
对于二次开发来说，很大一部分就找找文件和找数据库的变化情况对于数据库变化。还没有发现比较好用的监控数据库变化监控软件。今天，我就给大家介绍一个如何使用mysql自带的功能监控数据库变化1、打开数据库配置文件my.ini (一般在数据库安装目录)(D:MYSQ…
SAS、R以及SPSS的比较__统计语言大战
转载于:https://www.cnblogs.com/bicoffee/p/3818626.html
第九章实验报告
C程序设计实验报告 实验项目：构造数据类型实验 姓名：罗子健 实验地点：物联网实验室 实验时间：2019年6月26日 一、实验目的与要求 （1）掌握结构体类型说明和结构体类型变量、数组、指针的定义方法及使用。 …
LTE Paging时频资源
介绍PAGING的文章有很多，本文主要介绍Paging的时频资源。 为了达到省电的目的，UE在idle下使用DRX。UE在什么时刻(SFN/subframe)wakeup起来接受Paging 呢? 先介绍2个概念，如下： PO: Paging Occasion, 它是一个子帧，这…
mysql处理上百万条的数据库如何优化语句来提高处理查询效率
1.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 order by 涉及的列上建立索引。2.应尽量避免在 where 子句中对字段进行 null 值判断，否则将导致引擎放弃使用索引而进行全表扫描，如：select id from t whe…
smarty mysql_Smarty处理mysql查询数组
Smarty处理mysql查询数组MySQL的查询结果一般是一个数组，而不是所有结果集。因此我们需要将结果全部存到数组中进行处理，然后就可以很轻松的再Smarty中使用了。PHP Mysql 代码$sql"select article_id,article_title from tbl_article order by arti…
Linux文件压缩与解压缩
什么是压缩文件？原理是什么?简单的说，就是经过压缩软件压缩文件叫压缩文件，压缩的原理是把文件的二进制代码压缩，把相邻的0,1代码减少，例如有000000，可以把它变成6个0的写法60来减少该文件的空间ÿ…
git 使用和一些错误
一、简单使用 Git是目前世界上最先进的分布式版本控制系统，用于自动记录每次文件的改动，但是和所有版本控制系统一样，只能跟踪文本文件的改动，比如TXT文件，网页，所有的程序代码等，而图片、视频这…