响应式布局 —— 媒体查询

响应式网页设计是采用CSS的媒体查询（media query）技术，将三种已有的开发技巧，包括弹性网格布局、弹性图片、媒体和媒体查询整合在一起，命名为响应式网页设计。

1.视口

视口可以通过一个名称为 viewport 的元（meta）标签来进行控制，规则如下：

<meta name=“viewport” content=“width=device-width,initial-scale=1.0”>

• maximum-scale : 允许用户缩放到的最大比例，范围从0到10.0。
• minimum-scale : 允许用户缩放到的最小比例，范围从0到10.0。
• user-scalable : 用户是否可以缩放，值可以是：yes表示允许用户缩放；no表示不允许用户缩放。

1.1 视口常用属性及意义

属性值	含义
width	设定布局视口宽度
height	设定布局视口高度
initial-scale	设定页面初始缩放比例 （0-10）
user-scalable	设定用户是否可以缩放（yes/no）
minimum-scale	设定最小缩小比例（0-10）
maximum-scale	设定最大放大比例（0-10）

2. 媒体查询

2.1 语法

@media  媒体类型  and  （媒体特性）{ 
        CSS样式 
}

 2.2 常用媒体类型

• all ——所有设备
• screen —— 电脑显示器
• print —— 打印设备

2.3 引入媒体查询的方式

• @media 媒体类型 {
          选择器{ /*样式代码写在这里…*/}
  }
  

• <link  rel="stylesheet"  href="style1.css"  media="媒体类型" />
  

2.4 媒体特性

• and：同时满足这两者时生效，到达限定范围
• only：指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器
• not：排除某种指定的媒体类型，即排除符合表达式的设备

3. 响应式布局的优缺点

优点：

• 面对不同分辨率设备灵活性强，能够快捷解决多设备显示使用问题
• 更少维护，开发一个网站，多终端使用

缺点：

• 兼容各种设备工作量大
• 代码累赘，会出现隐藏无用的元素，加载时间长

4. 小案例

通过媒体查询实现响应式布局（简易的响应式滑动菜单）：

 

 

 心里有梦就要付诸行动！