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

我们都知道<img>标签能够通过固定宽高的方式来压缩大图。从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧。css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑。

那么问题来了,我们的网页不可能每一个图标都独立一张图片来载入。那样每张图片将会是一个http请求开销,我们一般的做法是把多张小图片拼在一张大图里。然后通过sprite(精灵)background-position定位的方法来解决,仅仅要载入一张大图,就能够完毕多个图标的显示。降低http请求开销。提高性能。所以,我们也希望把放大1倍的高清图标也拼在一张大图里,通过background-position来定位到每一个相应的图标上。并进行压缩。

网上找了非常多方法,最终找到了一个靠谱的方案:

1)首先。我们要准备两张排成一行(必须排成一行。以下解释)的图片,一张是原始大小。还有一张是放大1倍的大小

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2llbml0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">(map-icon.png)

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2llbml0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">(map-icon@2x.png)

2) 最初的写法。主要是在电脑浏览器上显示。我们使用原图map-icon.png就可以

/*
//网页标签:
<a class="control"><span class="car"></span></a>
<a class="control"><span class="position"></span></a>
*/ /* 装载图标的容器。固定宽高,内距设为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.png) 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张60x60的大图总宽度 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.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自适应,但我尝试过。不太easy成功。我们以后就直接用一行图标排开。给背景图宽赋值即可了!

最后,给出使用此方案的前后效果图:

(处理前)  

(处理后)

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题的更多相关文章

  1. CSS-自定义高度的元素背景图如何自适应以及after伪元素在ie下的处理

    我都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,我就觉得设计得从新弄张长点的背景图!这不多余么? 其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端 ...

  2. vue的挖坑和爬坑之css背景图样式终极解决方法

    原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...

  3. 利用css3的多背景图属性实现幻灯片切换效果

    css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...

  4. 2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题

    文章目录 1.效果展示 2.设置背景图的详细步骤 2.1 .下载background插件 2.2 .选择扩展设置 2.3 .在setting.json中编辑 2.4.对应的配置文件 2.5 .重启电脑 ...

  5. CSS3之body背景图平铺

    你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了,css3教你做人: body { background: url('xx.jpg')top center no-repeat; backgro ...

  6. CSS3制作文字背景图

    文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现, ...

  7. 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。

    哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...

  8. 解决jQueryUi AutoComplete在某些浏览器下无法出现候选项问题

    在某些浏览器(如火狐),在使用AutoComplete进行绑定的时候,无法出现与关键字相似的候选项.其原因这里有描述: 解决方法可以采用下面方式: $('#bindInputId).bind(&quo ...

  9. 解决网页在手机浏览器打开不停刷新的方案(百度的ua自动转向js问题)

    一:发现问题 原有可能是网站内挂了一个百度的ua自动转向js,手机访问的话会被自动转到feiyujd.com,然后又被转到www点feiyujd点com,这样反复死循环.就形成了一直在刷新,网站一闪一 ...

随机推荐

  1. Android 通过Dom, Sax, Pull解析网络xml数据

    这篇文章不是完全原创,XML解析的部分参考了 liuhe688 的文章.文章地址:http://blog.csdn.net/liuhe688/article/details/6415593 这是一个几 ...

  2. [Python]Unicode转ascii码的一个好方法

    写这篇文章的是一位外国人,他遇到了什么问题呢?比如有一个 Unicode 字符串他需要转为 ascii码: >>> title = u"Klüft skräms inför ...

  3. android api 中文 (74)—— AdapterView.AdapterContextMenuInfo

    前言 本章内容是android.widget.AdapterView.AdapterContextMenuInfo,版本为Android 2.3 r1,翻译来自"cnmahj",欢 ...

  4. JavaSript模块化 && AMD CMD 详解.....

    模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式.可以想象一个巨大 ...

  5. Android中的一些基础知识(三)

    最近在回顾Android的基础知识,就把一些常见的知识点整理一下,以后忘了也可以翻出来看一看. 在TextView中显示图像(使用< img>标签) 在TextView中显示图片的方法有许 ...

  6. Java之SPI机制

    之前开阿里的HSF框架,里面用到了Java的SPI机制,今天闲暇的时候去了解了一下,通过写博客来记录一下 SPI的全名为Service Provider Interface,我对于该机制的理解是为接口 ...

  7. Oracle逐行累加求和

    最近遇到一个比较常见的问题,每行记录需要累加求和.这些问题倒不是有多难,主要是在工作的过程中会经常遇到,特别是Oracle自带的一些函数也能够很好地解决这样一些通用的查询计算,在此记录一下. 问题描述 ...

  8. QtInternal 之 高效使用QString(使用QLatin1String,QStringRef,QStringBuilder,QStringMatcher等相关类)

    注意:本文翻译自  http://developer.qt.nokia.com   中的  UsingQStringEffectively   ,中文译文见  简体中文版 ,如果你对翻译wiki感兴趣 ...

  9. Spring Boot gradle

    最近有写一个电子订单商务网站,使用JAVA8,SPRING,ANGULARJS对项目使用的技术和大家分享. 第一次写博客,哪有不对需要改正的请联系改正. 因为是项目是我给别人做的无法提供源码见谅,我尽 ...

  10. DropDownList SelectedIndexChanged使用

    在asp.net中使用dropdownlist,默认是不会送的,我们想要选中一项然后更改相关的数据,应该吧属性AutoPostback改为true. http://msdn.microsoft.com ...