响应网页设计是一件大事，现在是没有疑问的。如果您还不熟悉响应式设计，查看我最近发布的响应站点列表。新手，响应式设计可能听起来有点复杂，但它实际上比你想的简单。为了帮助你快速地开始与响应的设计，我已经把一个快速教程。我保证你可以在3步了解响应式设计和媒体查询的基本逻辑（假设你有基本的CSS知识）。
步骤1。元标签
大多数移动浏览器的HTML页面宽规模视口的宽度正好适合在屏幕上。你可以使用视口元标签重置。在视口标签告诉浏览器使用设备宽度为视口的宽度和禁用的初始规模。在<头>中包含此元标记。
<meta name=“视口”content=“宽度=设备宽度，初始规模= 1”>
互联网浏览器8或以上不支持媒体查询。你可以使用media-queries.js或respond.js在IE添加媒体查询支持
<！[如果它是9个]
<脚本src=“HTTP：/ / CSS3 mediaqueries JS。googlecode。COM / SVN /躯干/ CSS3 mediaqueries。JS”> < /脚本>
<！[判断]——>
步骤2。HTML结构
在这个例子中，我有一个标题，基本的网页布局内容的容器，侧边栏和页脚。标题有一个固定的高度180px，内容容器为600px宽和侧边栏是300px宽。
IMG
步骤3。媒体查询
CSS3媒体查询响应的设计技巧。它就像是写如果条件告诉浏览器如何呈现页指定视口的宽度。
下面的规则将如果视口的宽度980px或不生效。基本上，我把所有的容器的宽度从像素值到百分之值，这样容器就会变成液体。
IMG
然后700px视口或更少，指定#内容和#边栏自动宽度和去除浮所以他们将显示为全宽。
IMG
对于480px或更少（手机屏幕），该#头高度自动复位，改变字体大小24px H1和隐藏#边栏。
IMG
你可以像你一样写很多的媒体查询。我在演示中只显示了3个媒体查询。该媒体查询的目的是应用不同的CSS规则来实现不同的布局指定视口的宽度。媒体查询可以在相同的样式表或在一个单独的文件。