博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
阅读量:5806 次
发布时间:2019-06-18

本文共 2002 字,大约阅读时间需要 6 分钟。

近期在负责一个微信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就可以

/*  //网页标签:    *//* 装载图标的容器。固定宽高,内距设为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成功。我们以后就直接用一行图标排开。给背景图宽赋值即可了!

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

(处理前)  

(处理后)

你可能感兴趣的文章
设计模式之-工厂模式、构造函数模式
查看>>
python matplotlib 中文显示参数设置
查看>>
数据库事务隔离级别
查看>>
os模块大全详情
查看>>
【ros】Create a ROS package:package dependencies报错
查看>>
从内积的观点来看线性方程组
查看>>
kali linux 更新问题
查看>>
HDU1576 A/B【扩展欧几里得算法】
查看>>
廖雪峰javascript教程学习记录
查看>>
WebApi系列~目录
查看>>
限制CheckBoxList控件只能单选
查看>>
Java访问文件夹中文件的递归遍历代码Demo
查看>>
项目笔记:测试类的编写
查看>>
如何迅速分析出系统CPU的瓶颈在哪里?
查看>>
通过容器编排和服务网格来改进Java微服务的可测性
查看>>
re:Invent解读:没想到你是这样的AWS
查看>>
PyTips 0x02 - Python 中的函数式编程
查看>>
阿里云安全肖力:安全基础建设是企业数字化转型的基石 ...
查看>>
使用《Deep Image Prior》来做图像复原
查看>>
如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
查看>>