# 响应式页面开发

响应式页面开发的能力可以定义为：

利用一套代码实现页面的布局和排版以适配不同分辨率的设备。

响应式页面开发要求我们解决两大问题：

• 为不同特性（如横屏还是竖屏等）的浏览器视窗使用不同的样式代码
• 让页面元素的尺寸能够依据浏览器视窗尺寸变化而平滑变化

本小节的学习目标是学会解决上述问题并能够开发这样一个经典的移动端响应式页面：

我们分 3 个步骤来实现这样一个响应式页面。

# 步骤 1 - 添加 viewport meta 标签

在页头 head 标签内添加 viewport meta 标签是实现响应式页面的第一步。

viewport meta 标签源于 Apple 公司，用来定义 iOS Safari 浏览器展示网页内容的可视范围及缩放比率。它虽然没有成为W3C标准，但是被其他绝大多数的移动端浏览器所支持（目前已知 IE Mobile 10 不支持）。W3C 尝试将 viewport meta 标签的功能进行标准化并通过 CSS 的 @viewport 规则来实现同样的功能，但这个标准目前还在草案中，兼容性也没有 viewport meta 标签好。

# PageSpeed 准则

Google 网页性能分析工具 PageSpeed Insights 的其中一条准则就是：

网页应在 head 标签内添加 viewport meta 标签，以便优化在移动设备上的展示效果，其推荐的设置为：

<meta name="viewport" content="width=device-width, initial-scale=1">

# 扩展阅读

• Mozilla《Using the viewport meta tag to control layout on mobile browsers》
• Google《Configure the viewport》
• Mozilla《@viewport》

# 步骤 2 - 使用 Media Queries

Media Queries 是为指定特性的浏览器视窗应用指定样式的手段，可以看成是 CSS 样式的过滤器或拦截器，通常情况下它可以通过 「@media 规则」结合「6 个查询参数」来拦截设备的浏览器特性（如显示类型、视窗高度、视窗宽度、横竖屏等），藉此可以为不同的特性应用不同的样式代码（相当于为不同的设备应用了不同的 CSS 样式）。

# 6 个参数

参数名称

参数描述）

min-width

当视窗宽度大于或等于指定值时，@media 规则下的样式将被应用

max-width

当视窗宽度小于或等于指定值时，@media 规则下的样式将被应用

min-height

当视窗高度大于或等于指定值时，@media 规则下的样式将被应用

max-height