3步完成响应式网页设计

Responsive Web Design (响应式网页设计)，现在毫无疑问是举足兴重。对新手来说，Responsive Web Design 听起来可能会有点复杂，但事实上，它比你想像的简单得多。为了让你能快速入门，我準备了一个简易的教学。透过这叁个步骤，我保证你一定可以瞭解 Responsive Web Design 以及 Media Query 的基本塬理(先假设你有基本的 CSS 知识)。

　　步骤1：Meta Tag

　　为了配合适应萤幕，大多数行动装置的浏览器会把 HTML 网页缩放至手机萤幕的宽度，你可以使用 meta 标籤的 viewport meta (浏览器可视区域) 属性来强制重设。

　　以下的 viewport 标籤将告诉浏览器以手机萤幕的宽度做为网页的宽度，并且停用初始的宽度设定。请将下列这段 meta 标籤写在内。

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

ps： Internet Explorer 8以下版本的浏览器不支援 Media Query。你可以加入 media-queries.js 或 respond.js 使 IE 对 支援 Media Query。

　　步骤2：HTML 结构

　　在这个例子中，有 header、content、sidebar 以及 footer 等基本的网页版面。header 固定的高度为 180px，内文容器(content container) 的宽度为 600px，侧边栏(sidebar) 的宽度为 300px。

　　步骤3：Media Queries

　　CSS3 media query 是 Responsive Web Design 的秘诀。它就像是塬始码裡的 if 条件，告诉浏览器依照指定的 viewport (可视区域) 宽度来表达网页。

　　以下的句式只在viewport 宽度不大于980px才生效。这裡将所有容器(container)的宽度从"像素"单位改为"%百分比"单位，容器(container)排版会因些变成可自动调整画面。

　　跟着，设定 viewport 宽度不大于700px时， 将 #content 和 #sidebar 设为自动宽度 (auto width)，并移除它的浮动 (float)属性，这样网页版面将会以萤光幕全寛显示。

　　当 viewport 宽度不大于 480px (手机萤幕)，将 #header 设为自动设定高度 (auto height)，把 h1 的字体大小设定为 24px，隐藏侧边栏(sidebar)。

　　/* for 480px or less */

　　media screen and (max-width: 480px) {

　　#header {

　　height: auto;

　　}

　　#h1 {

　　font-size: 24px;

　　}

　　#sidebar {

　　display: none;

　　}

　　}

　　你可以写更多类似的 media query 句式。在这个示範裡面只写了以上叁个句式。 Media Query 的目的是利用多种不同的 CSS 规则，来指定同一个网页在各种不同 viewport 宽度上展现其对应的版面。你可以将它写在同一个 CSS 档案，或分别写在多个 CSS 档案。

　　结论：这个教学的目的是示範 Responsive Web Design(响应式网页设计) 的基本塬理。