css3 Media Query响应式媒体查询

在CSS中，有一个极其实用的功能：@media 响应式布局。具体来说，就是可以根据客户端的介质和屏幕大小，提供不同的样式表或者只展示样式表中的一部分。通过响应式布局，可以达到只使用单一文件提供多平台的兼容性，省去了诸如浏览器判断之类的代码。

当然这种设计也存在着缺点，比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素，这样势必会导致大量不必要的流量。因此，如果有较为重要的移动端需求，那么还是开发专门的移动版页面为好。不过，对于诸如内容较少的页面 或者单页式网站来说，响应式布局依然不失为一种偷懒的好方法 ^ ^

原文：http://blog.dimpurr.com/css-media/