Jason Grigsby发表了篇文章,《CSS Media Query for Mobile is Fool’s Gold》对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法。然后Tim Kadlec写了篇《Media Query & Asset Downloading Results》,用js自动化的测试了Jason Grigsby的用例。

本文主要整理自Tim的这篇文章。我们来看看到底会不会浪费资源,并寻找下最优的方案。

直接看结果吧~~

测试一:img标签

运行测试

本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下:

1
2
3
<div id="test1">
<img src="data:images/test1.png" alt="" />
</div>
1
2
3
@media all and (max-width: 600px) {
#test1 { display:none; }
}

测试结果

如果有一种应该100%避免的隐藏图片的方法,那就是display:none。它基本上是没有用的。貌似Opera Mobile和Opera mini不会下载图片,而其它浏览器都会下载。Opera可以比较好的控制资源的下载,对于用户看不到的内容,它不会预先下载。

浏览器 请求图片
Android 2.1+ 请求
Blackberry (6.0+) 请求
Chrome (4.1)+ 请求
Chrome Mobile 请求
Fennec (10.0+) 请求
Firefox (3.6+) 请求
IE 请求
iOS (4.26+) 请求
Kindle (3.0) 请求
Opera (11.6+) 请求
Opera Mini (6.5+) 不请求
Opera Mobile (11.5) 不请求
RockMelt 请求
Safari (4+) 请求

结论

很简单:不要这样用。

测试二:背景图片display:none

运行测试

在本例中,div被设置了background-image。如果屏幕宽度小于600px,div就被设置为display:none。HTML和CSS代码如下:

1
<div id="test2"></div>
1
2
3
4
5
6
7
8
#test2 {
background-image:url('images/test2.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test2 {display:none;}
}

测试结果

结果和测试一一样:除了Opera mini和Opera Mobile和Firefox,所有浏览器都会下载图片。

浏览器 请求图片
Android 2.1+ 请求
Blackberry (6.0+) 请求
Chrome (4.1)+ 请求
Chrome Mobile 请求
Fennec (10.0+) 请求
Firefox (3.6+) 不请求
IE 请求
iOS (4.26+) 请求
Kindle (3.0) 请求
Opera (11.6+) 请求
Opera Mini (6.5+) 不请求
Opera Mobile (11.5) 不请求
RockMelt 请求
Safari (4+) 请求
Silk 请求

结论

同样:不要这样做。不过,像后面其它的测试,有其它的方法可以隐藏背景图片同时避免多余请求。

测试三:背景图片的父级元素被设置为display:none

运行测试

本测试中,对一个div标签设置背景图片,然后对其父元素(也是个div)在浏览器宽度小于600px时设置display:none。HTML和CSS代码如下:

1
2
3
<div id="test3">
<div></div>
</div>
1
2
3
4
5
6
7
8
9
10
#test3 div {
background-image:url('images/test3.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test3 {
display:none;
}
}

测试结果

表面上,这个测试貌似和测试二没太明显的区别,但是结论是这个方法是比较靠谱的。。。

浏览器 请求图片
Android 2.1+ 不请求
Blackberry (6.0+) 不请求
Chrome (16+) 不请求
Chrome Mobile 不请求
Fennec (10.0+) 请求
Firefox (3.6+) 不请求
IE 9+ 不请求
iOS (4.26+) 不请求
Kindle (3.0) 不请求
Opera (11.6+) 不请求
Opera Mini (6.5+) 不请求
Opera Mobile (11.5) 不请求
Safari (4+) 不请求

结论

这个方法不错。除了不太成熟的Fennec,其它浏览器都不请求不必要显示的图片。

测试四:背景图片层叠

运行测试

本测试中,一个div被设置了背景图片。如果浏览器宽度小于600px,该div会被给到另一个背景图片。该测试用来检测是否两个图片都会被请求,还是只请求需要的。HTML和CSS代码如下:

1
<div id="test4"></div>
1
2
3
4
5
6
7
8
9
10
#test4 {
background-image:url('images/test4-desktop.png');
width:200px;
height:75px;
}
@media all and (max-width: 600px) {
#test4 {
background-image:url('images/test4-mobile.png');
}
}

测试结果

比设置display:none好一些,这种方法的结果有点儿乱:

浏览器 同时请求
Android 2.1-3.0? 请求
Android 4.0 不请求
Blackberry 6.0 请求
Blackberry 7.0 不请求
Chrome (16+) 不请求
Chrome Mobile 不请求
Fennec (10.0+) 请求
Firefox (3.6+) 不请求
IE 9+ 不请求
iOS (4.26+) 不请求
Kindle (3.0) 请求
Opera (11.6+) 不请求
Opera Mini (6.5+) 不请求
Opera Mobile (11.5) 不请求
Safari 4.0 请求
Safari 5.0+ 不请求

结论

我会避免使用这种方法。尽管环境在改善,但是在Android市场中占主导地位的Android 2.x版本依然会像Fennec和Kindle一样同时下载两个图片。三者中,尤其因为Android(的碎片化),我会推荐寻找别的方案。

测试五:大背景图片被设置min-width

运行测试

本测试中,一个div元素在浏览器宽度大于601px时被设置一个背景图片,然后在浏览器宽度小于600px时被设置为另一个背景图片。HTML和CSS代码如下:

1
<div id="test5"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media all and (min-width: 601px) {
#test5 {
background-image:url('images/test5-desktop.png');
width:200px;
height:75px;
}
}
@media all and (max-width: 600px) {
#test5 {
background-image:url('images/test5-mobile.png');
width:200px;
height:75px;
}
}

测试结果

这种方案好一点儿:

浏览器 同时请求
Android 2.1+ 不请求
Blackberry (6.0+) 不请求
Chrome (16+) 不请求
Chrome Mobile 不请求
Fennec (10.0+) 请求
Firefox (3.6+) 不请求
IE 9+ 不请求
iOS (4.26+) 不请求
Kindle (3.0) 不请求
Opera (11.6+) 不请求
Opera Mini (6.5+) 不请求
Opera Mobile (11.5) 不请求
Safari (4+) 不请求

结论

这次更多的浏览器一起玩了。但是,Fennec一如既往得不能自已。Android 2.x比较怪异。它会同时请求两个图片——但只有在屏幕宽度大于600px匹配到min-width时才这样。这种行为貌似在Android 3.0版本中被改进了。这是件诡异的事情,我很好奇它为什么会这样。 其 实,有个好消息。Jason Grigsby 说他的对本例的测试结果和我的不太一样。所以我又在一些Android 2.x机器上跑了一下这个测试。结论是,我最初的测试结果不太正确,Android 2.x表现很好,我最初测试的那个平台有问题。这不仅仅对于开发者来说是个好消息,对我本人来说更是恢复了对人类的信心。。。。。。。

但是这依然不够,你将需要对IE8以下浏览器提供替代方案,那些版本的浏览器不支持media query,所以没有图片会被显示。当然,这个问题可以用条件注释来简单的兼容一下。

测试六:背景图片display:none(max-device-width)

运行测试

本测试和测试二类似,但是使用了max-device-width来替代max-width。HTML和CSS代码如下:

1
<div id="test6"></div>
1
2
3
4
5
6
7
8
9
10
#test6 {
background-image:url('images/test6.png');
width:200px;
height:75px;
}
@media all and (max-device-width: 600px) {
#test6 {
display:none;
}
}

结论

好吧,不用浪费时间了,这个测试结果和测试二的基本一致。

测试七:层叠覆盖高分辨率

运行测试

最后一个测试,是为了new ipad提供的,它使用了retina屏幕,这样它就要使用更高分辨率的图片了。

本例中,一个div被给到一个背景图片。然后,通过使用min-device-pixel-ratio属性,如果比例大于1.5,一个新的背景图片将会被用到。

HTML和CSS代码如下:

1
<div id="test7"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#test7 {
background-image:url('images/test7-lowres.png');
width:200px;
height:75px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
#test7 {
background-image:url('images/test7-highres.png');
width:200px;
height:75px;
}
}

测试结果

浏览器 同时请求
Android 2.1-3.0? 请求
Android 4.0 不请求
Blackberry 6.0 不请求
Blackberry 7.0 不请求
Chrome (16+) 不请求
Chrome Mobile 不请求
Fennec (10.0+) 不请求
Firefox (3.6+) 不请求
IE 9+ 不请求
iOS (4.26+) 不请求
Kindle (3.0) 不请求
Opera (11.6+) 不请求
Opera Mini (6.5+) 不请求
Opera Mobile (11.5) 不请求
Safari 4.0+ 不请求

结论

为了安全,这个方案可以多测试一些。看起来这种方法在绝大多数情况下是可用的。但是不幸的是,貌似Android 2.x会同时下载两个图片如果设备像素比大于或等于1.5时(或者你在media query中设置的别的任何值)。所以,在本例中,如果你使用了一个高分辨率的Android 2.x的设备,会比较苦逼。。。

好消息是,到目前位置,我还没听说有那一款Android 2.x的设备的屏幕比例超过1.5.所以如果你的项目面向使用retina屏幕的ios设备,你可以将min-device-pixel-ratio设置到2或者更高,这样会比较安全一点儿。。。

推荐

  • 如果你要隐藏一张内容图片,display:none是无效的,所以我推荐使用javascript方案或者服务器端实现;
  • 如果你要隐藏一张背景图片,最好的方法是隐藏其父级元素。如果你不方便这样做,那就用一个层叠样式覆盖掉它吧(就像上面的第五个方案),然后将设置background-image:none;
  • 如果你要切换多张图片,就把他们全部用media query定义吧。

关于响应式设计的思考

媒体查询现在最大的用处就是响应式设计了,神飞翻译这篇文章也是因为最近在思考响应式设计的效率问题。通过这些测试结果,我们在实现响应式设计的网站时,最好先处理移动设备,然后再向高分辨率设备升级。然后使用图片等外部资源的选择器,一定要写到媒体查询中去。

反馈

如果你觉得这些测试结果有任何错误的地方,欢迎在评论中提出,然后这些测试用例Tim都在GitHub上开源了,感兴趣的话可以fork下。。。

http://www.poluoluo.com/jzxy/201206/167034.html

响应式设计的思考:媒体查询(media query)的更多相关文章

  1. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  2. 媒体查询@media query

    @media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...

  3. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。(转)

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

  4. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  5. bootstrap_响应式布局简介_媒体查询_媒体选择器_2x3x图

    响应式布局 在不同设备上,同一网页根据设备特性(显示屏大小,分辨率)呈现不同的布局样式. 思考: 获取设备相关信息 将屏幕划分为几个区域 给需要变化的结构写多套 css 样式 媒体查询 常用写法 @m ...

  6. 媒体查询media query

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  8. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  9. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

随机推荐

  1. ES6学习一 JS语言增强篇

    一 背景 JavaScript经过二十来年年的发展,由最初简单的交互脚本语言,发展到今天的富客户端交互,后端服务器处理,跨平台(Native),以及小程序等等的应用.JS的角色越来越重要,处理场景越来 ...

  2. Xilinx Microblaze Bootloader

    作者:Hello,Panda 一般而言,Xilinx Microblaze会被用来在系统中做一些控制类和简单接口的辅助性工作,比如运行IIC.SPI.UART之类的低速接口驱动,对FPGA逻辑功能模块 ...

  3. 在ASP.NET中将GridView数据导出到Word、Excel

    在ASP.NET中将GridView数据导出到Word.Excel asp.net,导出gridview数据到Word,Excel,PDF   #region Export to Word, Exce ...

  4. Java中替换字符串中特殊字符+ 20150921

    需求:今天需要将字符串中的" +"转换程"%2B",但是"+"是正则表达式中的特殊字符,使用需要反斜杠转义,具体示范: String a=& ...

  5. c++的关联容器入门(map and set)

    目录 std::map std::set C++的关联容器主要是两大类map和set 我们知道谈到C++容器时,我们会说到 顺序容器(Sequence containers),关联容器(Associa ...

  6. BZOJ1835: [ZJOI2010]base 基站选址【线段树优化DP】

    Description 有N个村庄坐落在一条直线上,第i(i>1)个村庄距离第1个村庄的距离为Di.需要在这些村庄中建立不超过K个通讯基站,在第i个村庄建立基站的费用为Ci.如果在距离第i个村庄 ...

  7. Win2D 中的游戏循环:CanvasAnimatedControl

    Win2D 是 DirectX 的一个高层封装,提供了极大 DirectX 性能的同时,又具有很好用的 API 设计. 用 Win2D 除了能做出高性能的视觉效果之外,还可以轻而易举地搭建一个游戏循环 ...

  8. python 生成器 迭代器 yiled

    文章来源:http://python.jobbole.com/81911/ https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449 ...

  9. [TopCoder12141]SweetFruits

    vjudge description 有\(n\)个水果,有一些水果是香的,它们各有一个香度值,剩下的水果是不香的. 现在你要把这\(n\)个水果连成一棵树,定义一个水果是真香的当且仅当它是香的且他与 ...

  10. 记录一次MyEclipse工程搭建的辛酸

    一个历史项目,使用的是Myeclipse6.5版本:这一天就砸在这个项目了. 调通web项目:内置的是tomcat插件,貌似和eclipse的server版的还不太一样. 长这个样子: