日期：2013-7-8  来源：

直到 @supports被广泛支持，媒体查询的使用接近于CSS中写逻辑控制。我们经常用媒体查询来根据设备调整属性（通常根据屏幕宽度调 整属性），例如根据不同的屏幕宽度来设置不同的元素宽度或者是悬浮位置。那么我们为什么不用这种方式来改变背景图片呢？

/* 默认是为桌面应用加载图片 */.someElement { background-image: url(sunset.jpg); }@media only screen and (max-width : 1024px) {    .someElement { background-image: url(sunset-small.jpg); }}

上面的代码片段是为手机设备或是类似的移动设备加载一个较小尺寸的图片，特别是需要一个特别小的图片时（例如图片的大小几乎不可视）。

开发人员普遍会将他们的代码习惯优先于用户体验。但是很多很小的改变可以让用户体验有个飞跃提升，所以任何一点儿小小的优化都会提升你网站的库存。再回顾一下之前的这些优化，我将在以后继续介绍其他的优化。

via

来源：