css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
近期在负责一个微信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网页在手机浏览器下图标模糊的问题的更多相关文章
- CSS-自定义高度的元素背景图如何自适应以及after伪元素在ie下的处理
我都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,我就觉得设计得从新弄张长点的背景图!这不多余么? 其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端 ...
- vue的挖坑和爬坑之css背景图样式终极解决方法
原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题
文章目录 1.效果展示 2.设置背景图的详细步骤 2.1 .下载background插件 2.2 .选择扩展设置 2.3 .在setting.json中编辑 2.4.对应的配置文件 2.5 .重启电脑 ...
- CSS3之body背景图平铺
你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了,css3教你做人: body { background: url('xx.jpg')top center no-repeat; backgro ...
- CSS3制作文字背景图
文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现, ...
- 解决Chrome浏览器自动记录用户名和密码的黄色背景问题和该解决方法与tab切换至下一个input冲突的问题。
哈哈哈,是不是标题很长呀,不逗你们了.其实这么长的标题主要就说了两件事: 第一件:解决Chrome浏览器自动记录用户名和密码的黄色背景问题. 第二件:输入完用户名后按下tab键切换至下一个输入密码in ...
- 解决jQueryUi AutoComplete在某些浏览器下无法出现候选项问题
在某些浏览器(如火狐),在使用AutoComplete进行绑定的时候,无法出现与关键字相似的候选项.其原因这里有描述: 解决方法可以采用下面方式: $('#bindInputId).bind(&quo ...
- 解决网页在手机浏览器打开不停刷新的方案(百度的ua自动转向js问题)
一:发现问题 原有可能是网站内挂了一个百度的ua自动转向js,手机访问的话会被自动转到feiyujd.com,然后又被转到www点feiyujd点com,这样反复死循环.就形成了一直在刷新,网站一闪一 ...
随机推荐
- Servlet 基础知识
8.Response 8.1.getOutputStream和getWriter方法分别用于得到输出二进制数据.输出文本数据的ServletOutputStream .Printwriter对象. ...
- JAVA GUI学习 - JTabbedPane选项卡组件学习
public class JTabbedPaneKnow extends JFrame { JTabbedPane jTabbedPane; JPanel jPanelRed; JPanel jPan ...
- hdoj 5311 Hidden String(KMP)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5311 思路分析:该问题要求在字符串中是否存在三个不相交的子串s[l1..r1], s[l2..r2], ...
- Android测试TestSuite的执行方法
public class StartTest extends InstrumentationTestRunner { public TestSuite getAllTests() { ...
- 使用Lock实现信号量
public class SemaphoreOnLock { private final Lock lock = new ReentrantLock(); private fi ...
- iOS9 白名单问题 -canOpenURL: failed for URL: "xx" - error:"This app is not allowed to query for scheme xx"
[iOS开发]-canOpenURL: failed for URL: "xx" - error:"This app is not allowed to query fo ...
- HDU 2087 剪花布条 KMP入门
Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条.计算一下能从花布条中尽可能剪出几块小饰条来呢? Input ...
- python下线程以及锁
1.python多线程 #encoding=utf-8 """ python多线程,并非真正意义上的多线程 全局锁:在指定时间里,有且只有一个线程在运行 "&q ...
- BZOJ 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛( floyd )
对于第 i 头牛 , 假如排名比它高和低的数位 n - 1 , 那么他的 rank 便可以确定 . floyd -------------------------------------------- ...
- WebSphere优化
优化WebSphere WebSphere里的profile刚配完,一般默认的heapsize即Xms与Xmx值只有256mb,而IBM WAS是几个J2EE服务器中最吃内存的机器,在布署一些EAR应 ...