响应式设计的思考（媒体查询）
在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源，然后测试一些可用方法。
测试一：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定义吧。