响应式布局知识点总结

当今屏幕分辨率从 320px (iPhone) 到 2560px (大屏显示器) 或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页。

---

网站布局历史

table布局
固定布局（单位使用px）
流体布局（单位使用%）
响应式布局（媒体查询+流体布局）

什么是响应式

响应式初探

一个网页可以兼容 PC、PAD 和移动端等任何一个平台，则这种网页就是响应式的设计。
响应式设计最重要的环节就是媒体查询，我们仿造一个最为流行的 Bootstrap 框架中的媒体查询代码，具体如下：

/*当页面大于 1200px 时，大屏幕，主要是 PC 端*/@media (min-width: 1200px) {}/*在 992 和 1199 像素之间的屏幕里，中等屏幕，分辨率低的 PC*/@media (min-width: 992px) and (max-width: 1199px) {}/*在 768 和 991 像素之间的屏幕里，小屏幕，主要是 PAD*/@media (min-width: 768px) and (max-width: 991px) {}/*在 480 和 767 像素之间的屏幕里，超小屏幕，主要是手机*/@media (min-width: 480px) and (max-width: 767px) {}/*在小于 480 像素的屏幕，微小屏幕，更低分辨率的手机*/@media (max-width: 479px) {}

---

响应式页面编写步骤

Step 1：Meta 标签

为了适应屏幕，不少移动浏览器都会把 HTML 页面置于较大视口宽度（一般会大于屏幕宽度），iPhone 的 Safari 浏览器会自动缩小页面来显示，你可以使用 viewport meta 标签来设定。

以下 viewport meta 标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放：

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

注意：IE8 及其更低版本不支持 media query ，可以使用 media-queries.js 或 respond.js 脚本实现支持。

<!--[if lt IE 9]>    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">    </script><![endif]-->

Step 2. HTML 结构

Step 3. Media Queries

CSS3 media query 是自适应网页设计的关键，他就像高级语言里的 if 条件语句，告诉浏览器根据不同的视口宽度（这里等于浏览器宽度）来渲染网页。

根据你的喜好，可以定义更多的 media queriey 条件。

---

小知识点（但很重要）

先看看它的效果

在开始之前，点击最终预览来看看它的效果。改变浏览器的宽度，你将会看到页面布局会跟着自动改变。

当屏幕分辨率大于 1024px 时，网页宽度将会是 980px 。用 CSS3 媒体查询（Media query）来检验屏幕分辨率，如果小于 980px ，页面宽度将会用自适应来取代固定宽度；如果小于 650px ，主题和边栏（content container and sidebar）将会撑满屏幕并一列显示。

html5.js

请注意：使用 html5编写网页时，低于 IE9 版本 IE 浏览器并不支持<header>, <article>, <footer>, <figure>等 html5 标签，需要用 js 脚本来让它们支持。

<!--[if lt IE 9]><script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

CSS3 媒体查询（CSS3 Media Query）

媒体查询脚本（Media Queries Javascript）

IE8 或者更低的版本不支持 CSS3 媒体查询，但通过添加脚本 css3-mediaqueries.js 来实现这一功能。

<!--[if lt IE 9]>    <script type="text/javascript" src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]-->

媒体查询 CSS（Media Queries CSS）

为媒体查询创建新的 CSS 样式表

<link href="media-queries.css" rel="stylesheet" type="text/css"/>

图片的响应式

为了让图片显示更加灵活，只需设置 max-width:100% 和 height:auto。
然而 max-width:100% 和 height:auto 在IE7中运行，但不能在 IE8 中运行（诡异的 BUG 啊），所以需要为 IE8 添加 width:auto\9

img {    width: auto\9; /* ie8 */    height: auto;    max-width: 100%;}

嵌入类视频的响应式

为了让嵌入视频显示更加灵活，需要用上面同样的方法。不知道是什么原因， max-width:100% （仅仅是视频时）不能被 Safari 识别，此时要用 width:100% 代替

.video embed,.video object,.video iframe {    width: 100%;    height: auto;}