调查表明： 截至2014年8月，世界排名前1000的网站平均的页面大小为1.7Mb，其中的图片就占到了1Mb
更可气的是当你使用的移动设备的时侯，图像根本没有什么用只会浪费你的宽带。
“移动互联网”时代
为了解决这个问题很多网站将iPhone以及Android用户，重定向到一个专用的为移动设备设计的网站，通常像m.domain.com这样的域名。
不过这无疑是非常痛苦的，这时侯m.domain.com网站的杀手： 响应式设计就出现了。
2010年，Web开发人员Ethan Marcotte写了一个关于响应网页设计的小文章。
Marcotte建议，随着移动设备的普及，建设专用的移动网站是非常痛苦的，响应性的设计则会更有意义。使用相对宽度，可以适应任何屏幕，无论什么设备访问了它效果都会很好。 响应式设计是未来发展的方向。
注* 两个小示例： （宽度小于480px的设备启用 shetland.css文件）
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />
也可以将其与正常的css文件写在一起，加一个@media标签即可
@media (max-width: 480px) {
#article-panel {
padding-left: 0;
margin-left: 0;
}
}关于图片的问题，可以使用"聪明的JavaScript"对图片进行后处理，默认下载适合手机使用的小图，然后在渲染页面的时侯为桌面程序下载大图。但是负作用是可能会延长你的页面加载时间。
因此最好的解决方案是完全设计一个新的HTML元素来同时适应桌面和移动端，<picture> 元素（响应式图片元素？）就这样被设计出来了：
picture元素示例
基本用法： 当设备宽度大于45em时启用large.jpg
<picture>
<source media=”(min-width: 45em)” srcset=”large.jpg”>
<source media=”(min-width: 18em)” srcset=”medium.jpg”>
<img src=”small.jpg” alt=”Robert Anton Wilson laughing”>
</picture>
高级用法
<picture>
<source sizes=”(max-width: 30em) 100%, (max-width: 50em) 50%, calc(33% - 100px)”
srcset=”pic100.jpg 100w, pic200.jpg 200w, pic400.jpg 400w,
pic800.jpg 800w, pic1600.jpg 1600w, pic3200.jpg 3200w”>
<img src=”pic400.jpg” alt=”Robert Anton Wilson laughing”>
</picture>
注* 会不会有点复杂？ 这个规范仅处在草案阶段，尚未成为正式标准。
这里有一个叫 http://specifiction.org/ 的网站，开发人员有任何建议都可以提出，你的建议有可能被W3C标准团队采纳.
注* 原文很长，因此只摘取重要部分: how-a-new-html-element-will-make-the-web-faster
这不知道等到何年何月现在calc支持的都不好
觉得不靠谱 还是还原css设计本质，这些活让js来做吧。