web前端|html教程
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
web前端-html教程
最近在负责一个微信H5 App项目，遇到一个郁闷的问题，手机浏览器查看网页时图标都是模糊的，有锯齿，电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题，后来网上查找了一些办法，大部分的解决方案都是设计一套放大1倍的图标，再压缩显示。
sipdroid源码分析,ubuntu怎么查看驱动,爬虫工厂如何建立,温哥华php,提供seo价格lzw
我们都知道标签可以通过固定宽高的方式来压缩大图，从而得到高清的显示效果，而图标一般用背景图来呈现，怎么搞呢？好吧，css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高，直接解决了前者的疑惑。
手机会员源码,ubuntu 没有侧栏,爬虫session 跨域,PHP11235,uc优化seolzw
那么问题来了，我们的网页不可能每个图标都独立一张图片来加载，那样每张图片将会是一个http请求开销，我们一般的做法是把多张小图片拼在一张大图里，然后通过sprite(精灵)background-position定位的方法来解决，只要加载一张大图，就可以完成多个图标的显示，减少http请求开销，提高性能。所以，我们也希望把放大1倍的高清图标也拼在一张大图里，通过background-position来定位到每个对应的图标上，并进行压缩。网上找了很多方法，终于找到了一个靠谱的方案：
openssl源码包下载,用vscode画图怎么看,原版的 ubuntu,tomcat输出被覆盖,床头扁爬虫,isbool php,有利于seo的网站源码,网站安全设置教程lzw
1）首先，我们要准备两张排成一行(必须排成一行，下面解释)的图片，一张是原始大小，另一张是放大1倍的大小
（map-icon.jpg）
(map-icon@2x.jpg)
2) 最初的写法，主要是在电脑浏览器上显示，我们使用原图map-icon.jpg即可
/* //网页标签： *//* 装载图标的容器，固定宽高，内距设为0 */.control { display: block; text-decoration: none; padding: 0; width: 30px; height: 30px; }/* 图标标签，宽高自动填充 */.car,.position,.zoom-in,.zoom-out {display: block; width: 100%; height: 100%; background: url(images/map-icon.jpg) no-repeat;}.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }
3) 问题是，我们怎么知道background-size属性值要设置为多少？ 后来找到有一个公式：
高分辨率图像宽度 / 目标图像宽度 = X原始Sprites图像宽度 / x = background-size的宽度值
好吧，公式的原理我们就不在这里展开了，直接写上去试试：
60 / 30 = 2 即放大倍数
7张60×60的大图总宽度 420
420 / 2 = 210 即background-size的宽
而background-size的高，我们这里设置为auto即可，然后换上@2x的大图进行压缩
还有，我们必须在外层声明一个Media Queries，该Media Queries专门针对Retina屏幕设备显示器
/* 移动端媒体查询像素比 */@media only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min--moz-device-pixel-ratio: 2),only screen and (-o-min-device-pixel-ratio: 2/1),only screen and (min-device-pixel-ratio: 2) {.car,.position,.zoom-in,.zoom-out {background: url(images/map-icon@2x.jpg) no-repeat; background-size: 210px auto;}/* 注意这里还是按30像素大小的位置来查找 */.car { background-position: 0 0; }.position { background-position: -30px 0; }.zoom-in { background-position: -60px 0; }.zoom-out { background-position: -90px 0; }}
相反，貌似也可以给定高度的值，宽度取auto自适应，但我尝试过，不太容易成功。我们以后就直接用一行图标排开，给背景图宽赋值就行了！
最后，给出使用此方案的前后效果图：
（处理前）
（处理后）
