最近在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题,后来网上查找了一些办法,大部分的解决方案都是设计一套放大1倍的图标,再压缩显示。
我们都知道<img>标签可以通过固定宽高的方式来压缩大图,从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧,css3出了一个很牛逼的属性background-size可以直接设置背景图的宽高,直接解决了前者的疑惑。
那么问题来了,我们的网页不可能每个图标都独立一张图片来加载,那样每张图片将会是一个http请求开销,我们一般的做法是把多张小图片拼在一张大图里,然后通过sprite(精灵)background-position定位的方法来解决,只要加载一张大图,就可以完成多个图标的显示,减少http请求开销,提高性能。所以,我们也希望把放大1倍的高清图标也拼在一张大图里,通过background-position来定位到每个对应的图标上,并进行压缩。网上找了很多方法,终于找到了一个靠谱的方案:
1)首先,我们要准备两张排成一行(必须排成一行,下面解释)的图片,一张是原始大小,另一张是放大1倍的大小
(map-icon.png)
(map-icon@2x.png)
2) 最初的写法,主要是在电脑浏览器上显示,我们使用原图map-icon.png即可