juejin小册| H5 |2响应式页面开发

响应式页面开发

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

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

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

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

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

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

步骤 1 - 添加 viewport meta 标签

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

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