响应式布局之媒体查询

什么是响应式设计：
响应式设计即页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

以下介绍流行框架Bootstrap的响应式设计实现方案：

方案一：响应式媒体查询

使用CSS媒体查询（）来检测浏览器视口的宽度，然后在根据条件加载和应用调整布局的样式表。
根据媒体查询添加自定义的CSS，可以像下面这样把所有规则写到一个CSS文件中，也可以单写一个CSS文件：

 

 

 

 

/* 大屏幕 */

@media(min-width: 1200px)  { .... }

/* 平板竖屏到横屏到常规屏幕 */

@media(min-width: 768px)and(max-width:979px)  { .... }

/* 手机横屏到平板竖屏 */

@media(max-width: 767px)  { .... }

/* 手机横屏及更小屏幕 */

@media(min-width: 480px)  { .... }

对于大型网站，应该把不同的媒体查询分别保存在不同的CSS文件中。而在Html的<link>标签中，可以根据条件加载它们。这样可以保证加载的文件相对小，但在响应式布局中会增加HTTP请求。如果你使用less编译css，可以把它们都放在一个文件中：

方案二：媒体查询辅助类

在开发中，可以通过提供一些辅助类来实现响应式开发，但是，这些辅助类还是能不用就不要用。什么情况下用呢?比如在某些布局中显示或隐藏自定义元素。比如，常规布局中可以包含一个页眉，但在移动布局中需要简化它，只显示少量的元素。此隐藏的元素添加隐藏类。