响应式网页设计是现在非常流行的技术。如果您对响应式设计还不熟悉，请查看我之前的响应式网站列表。对于外行来说，响应式设计可能听起来有点复杂，但实际上比您想象的要简单。为了帮助您快速入门响应式设计，我写了一个快速教程。我保证你可以通过三个步骤（假设你有基本的CSS知识）学习响应式设计和媒体查询（mediaquery）的基本逻辑。第一步 Meta标签（见演示）大多数移动浏览器会将HTML页面缩放到更宽视口的宽度，以便内容可以在屏幕上正确显示。您可以使用视口元标记重置此行为。下面的视口标签告诉浏览器使用设备宽度作为视口的宽度并禁用初始缩放。在
中添加此元标记。
InternetExplorer8及更早版本不支持媒体查询。您可以使用media-queries.js或respond.js在IE中添加对媒体查询的支持。步骤两个 HTML结构在这个例子中，我有一个基本的页面布局，由标题、内容容器、侧边栏和底部组成。标题的固定高度为180px，内容容器的宽度为600px，侧边栏的宽度为300px。第三步 媒体查询（MediaQuery）CSS3媒体查询是响应式设计的一个trick。这与编写一个if条件来告诉浏览器如何针对特定视口宽度呈现页面是一样的。以下规则集在视口宽度小于或等于980px时生效。基本上，我将所有容器的宽度从像素更改为百分比，以便容器变得流畅。然后对于宽度小于或等于700px的视口，为#content和#sidebar指定autowidth并删除浮动，以便它们可以全宽显示。对于宽度小于或等于480px（移动设备屏幕）的，将#header的高度重新设置为auto，修改h1的字体大小为24px，隐藏#sidebar。您可以根据需要编写任意数量的媒体查询。我在演示中只展示了三个媒体查询。媒体查询的目的是通过为指定的视口宽度应用不同的CSS规则来获得不同的布局。媒体查询可以在同一个样式表中，也可以在单独的文件中。总结本教程旨在向您传授响应式设计的基础知识。如果想看更深入的教程，可以查看我之前的教程：《利用媒体查询进行响应式设计》。作者：JeremyWei|可转载，但必须以超链接形式注明出处、作者信息及版权声明网址：http://weizhifeng.net/responsive-design-in-3-steps.html
