响应式设计的思考(媒体查询)

2017-5-24 hanbin Web前端

在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后测试一些可用方法。

测试一:img标签

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

测试结果:

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

测试二:背景图片display:none;

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

测试结果:

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

测试三:背景图片父级元素display:none;

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

测试结果:

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

测试四:背景图片层叠。

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

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

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

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

测试结果:

这种方案好一点儿

推荐:

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

网站备案号:京ICP备11043289号-1 北京市公安局网络备案 海1101084571
版权所有 北京育灵童科技发展有限公司 Copyright © 2002-2018 www.elight.cn, All Rights Reserved