响应式网页设计三步走 第一步. Meta 标签 (查看 demo) 为了适应屏幕，多数的移动浏览器会把HTML网页缩放到设备屏幕的宽度。你可以使用meta标签的viewport属性来设置。下面的代码告诉浏览器使用设备屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。这段代码写在 里面

1.

IE8及以下的浏览器不支持media query。你可以使用media-queries.js 或 respond.js 。这样IE就能支持media query了。

1.

第二步. HTML 结构

这个例子里面，有header、content、sidebar和footer等基本的网页布局。 header 有固定的高180px，content 容器的宽是600px，sidebar的宽是300px。

第三步. Media QueriesCSS3 media query 响应式网页设计的关键。它像一个if语句，告诉浏览器如何根据特定的屏幕宽口来加载网页。 如果屏幕窗口小于980px，下面的规则就生效。在这里，我设置了容器的宽度为百分比的形式而不是像素单位，这样会更加灵活。

如果屏幕窗口小于700px， 定义 #content 和 #sidebar 为自适应宽度，并移除它的浮动属性，这样它会全屏显示。

如果屏幕窗口小于480px (移动设备的屏幕)， 设置#header 高为自适应，把h1字体设置为24px，并且隐藏#sidebar。 这些media query，你可以写很多。在这个demo，我只写了三个。media query的目的是应用不同的CSS规则来实现屏幕的最佳布局。它可以写在同一个CSS文件，也可以写在不同的文件。

通过CSS3 Media Query实现响应式Web设计 概述 我们将范例页面的父级容器宽度设置为固定的980px，对于桌面浏览环境，该宽度适用于任何宽于1024像素的分辨率。我们通过media query来监测那些宽度小于980px的设备分辨率，并将页面的宽度设置由“固定”方式改为“液态”，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主内容部分的下方，整个页面变为单栏布局。

HTML代码 我们将把注意力集中在页面的主要布局方面，并使用HTML5标签来更加语义化的实现这些结构，包括页头、主要内容部分、侧边栏和页脚：

1.

HTML5 IE是永恒的话题;对于我们使用的HTML5标签，IE9之前的版本无法提供支持。目前的最佳解决方案仍是通过html5.js来帮助这些旧版本的IE浏览器创建HTML5元素节点。在我们的页面HTML代码中调用该JS文件：

1.

CSS HTML5块级元素样式

首先仍是浏览器兼容问题。虽然我们已经可以在低版本的IE中创建HTML5元素节点，但还是需要在样式方面做些工作，将这些“新”元素声明为块级：

1. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 2. display: block; 3. }

主要结构的CSS

忽略细节，我们仍是将注意力集中在大问题上。正如在前文“概述”中提到的，默认情况下页面容器的固定宽度为980像素，页头部分(header)的固定高度为160像素;主要内容部分(content)的宽度为600像素，左浮动;侧边栏(sidebar)右浮动，宽度为280像素。

1. #pagewrap { 2. width: 980px; 3. margin: 0 auto; 4. } 5. 6. #header { 7. height: 160px; 8. } 9. 10. #content { 11. width: 600px; 12. float: left; 13. } 14. 15. #sidebar { 16. width: 280px; 17. float: right; 18. } 19. 20. #footer { 21. clear: both; 22. }

截至目前的效果演示

目前我们只是初步完成了页面结构的HTML和默认结构样式，当然，并不包括那些与话题无关的细节实现问题。正如可以在目前的演示中看到的，由于还没有做任何media query方面的工作，页面还不能随着浏览器尺寸的变化而改变布局。 CSS3 Media Query

终于开始说正事儿了。首先我们需要在页面中调用css3-mediaqueries.js文件，来帮助IE8或是之前的版本支持CSS3 media queries：

1.

接下来，我们要创建CSS样式表，并在页面中调用： 1. 当浏览器可视部分宽度大于650px小于980px时(液态布局) ◆ 将pagewrap的宽度设置为95% ◆ 将content的宽度设置为60% ◆ 将sidebar的宽度设置为30% 1. @media screen and (max-width: 980px) { 2. 3. #pagewrap { 4. width: 95%; 5. } 6. 7. #content { 8. width: 60%; 9. padding: 3% 4%; 10. } 11. 12. #sidebar { 13. width: 30%; 14. } 15. #sidebar .widget { 16. padding: 8% 7%; 17. margin-bottom: 10px; 18. } 19. 20. }

当浏览器可视部分宽度小于650px时(单栏布局)

◆ 将header的高度设置为auto ◆ 将searchform绝对定位在top 5px的位置 ◆ 将main-nav、site-logo、site-description的定位设置为static ◆ 将content的宽度设置为auto(主要内容部分的宽度将扩展至满屏)，并取消float设置 ◆ 将sidebar的宽度设置为100%，并取消float设置 @media screen and (max-width: 650px) {

#header { height: auto; }

#searchform { position: absolute; top: 5px; right: 0; }

#main-nav { position: static; }

#site-logo { margin: 15px 100px 5px 0; position: static; }