css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WE

最近在负责一个微信H5 App项目，遇到一个郁闷的问题，手机浏览器查看网页时图标都是模糊的，有锯齿，电脑浏览器显示则是正常。大概知道是分辨率适配等类型的问题，后来网上查找了一些办法，大部分的解决方案都是设计一套放大1倍的图标，再压缩显示。

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.png) 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自适应，但我尝试过，不太容易成功。我们以后就直接用一行图标排开，给背景图宽赋值就行了！

最后，给出使用此方案的前后效果图：

（处理前）

（处理后）

查看更多关于css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题_html/css_WE的详细内容...