使用CSS3媒体查询技术创造响应式设计
显示器的分辨率的范围越来越宽泛了，从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大。用户浏览网页的的设备也不仅仅是桌面电脑了。现在用户使用手机，上网本，平板电脑设备如iPad 或者 Playbook 等来登录网站。因此传统的固定宽度的设计的方法将不再适用。网页设计需要更广的适应性。布局需要能自动适应的分辨率和解析设备。下面的教程将会大家展示如何通过HTML5和 css3 的媒体介质查询技术 创建跨浏览器的响应式设计，
View Demo Responsive Design
Download Demo ZIP
看效果先
在我们开始之前，先让我们看看最终的效果 final demo。缩放你的浏览器来看其布局的基于视窗的变化。
更多的例子
If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr.
概要
页面容器的宽度为980px，这样的宽度对分辨率大于1024px的设备来说是比较合适的。媒体介质查询技术将会检测视窗是不是小于980像素的宽度，然后布局将会从固定宽度的布局转换成流动布局（fluid width）。当视窗小于650px时，将会扩展内容容器和边栏为全部宽度时期成为单独一列布局。
HTML 代码
在这里我就不赘述HTML代码了。下面就是主要的布局结构。这里有一个 “pagewrap” 容器，包含 “header”，“content”，“siderbar”和“footer”。
<div id="pagewrap"> <header id="header"> <hgroup> <h1 id="site-logo">Demo</h1> <h2 id="site-description">Site Description</h2> </hgroup> <nav> <ul id="main-nav"> <li><a href="#">Home</a></li> </ul> </nav> <form id="searchform"> <input type="search"> </form> </header> <div id="content"> <article class="post"> blog post </article> </div> <aside id="sidebar"> <section class="widget"> widget </section> </aside> <footer id="footer"> footer </footer> </div>
HTML5.js
请注意我在例子中使用了html5标签。IE9一下的浏览器将不支持这些标签元素，比如<header;><article;><footer;><figure;>等等。包含 html5.js 文件将会是这些浏览器明白这些新元素。
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
CSS
将新HTML5元素初始化为块元素
下面的css代码将会初始化HTML5元素为块元素（article, aside, figure, header, footer, etc.）。
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
主结构CSS
和上面一样，这里就不再赘述css的细节了。主“pagewrap”容器的宽度是980px,头部设置一个固定的高度160px。“content”容器设置为600px并且左浮动，“sidebar”容器280px宽右浮动。
#pagewrap {
width: 980px;
margin: 0 auto;
}
#header {
height: 160px;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 280px;
float: right;
}
#footer {
clear: both;
}
Demo
下面就是设计的例子。请注意媒体查询技术还没有被使用。当你缩放浏览器窗口是，你将看不到布局的缩放。
css3 媒体查询那些事
下面就到了最有意思的地方-媒体介质查询 media queries
引入媒体查询javascript库
IE8和更老的浏览器不支持css3的媒体查询。你可以通过加入 css3-mediaqueries.js 让其在这些低版本的浏览器中生效。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
加入媒体查询
为媒体查询创建一个新的样式表文件。请查看我的上一篇教程，了解如何使用媒体查询技术 media queries
<link href="media-queries.css" rel="stylesheet" type="text/css">
小于980px的视窗是使用流布局（Fluid Layout）
小于980px的视窗时，下面的规则生效：
- pagewrap = reset width to 95%
- content = reset width to 60%
- sidebar = reset width to 30%
技巧：使用百分比的值，让其容器自适应。
@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
视窗小于650px时（一列布局）
接下来，我们创建另一个css文件，应用于视窗小于650px的时候。
- header = 将高度重置为 auto
- searchform = 重新定位搜索表单，将其放在距顶5像素的位置。
- main-nav = 将其位置重置为static
- site-logo = 将其位置重置为static
- site-description = 将其位置重置为static
- content = 将其宽度重置为auto (这样可以将其容器扩展到整个宽度) 并且去掉浮动
- sidebar = 将宽度重置为100%并且清除浮动。
@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;
}
#site-description {
margin: 0 0 15px;
position: static;
}
#content {
width: auto;
float: none;
margin: 20px 0;
}
#sidebar {
width: 100%;
float: none;
margin: 0;
}
}
视窗小于480px时
下面的样式将会应用于视窗最大为480时，这个宽度刚好是Iphone竖屏时的宽度。
- html = 取消文字大小调整功能。通常，iPhone将会将文字变大，以便于更方便阅读。你可以将这个属性关闭通过增加-webkit-text-size-adjust: none 的方法.
- main-nav = 将其文字的大小调整为90%
@media screen and (max-width: 480px) {
html {
-webkit-text-size-adjust: none;
}
#main-nav a {
font-size: 90%;
padding: 10px 8px;
}
}
灵活的图像
为了使图片更灵活，我们可以简单的增加 max-width:100% 和 height:auto 属性。图像 max-width:100% 和 height:auto 在IE7中能很好的工作，但是在IE8中却不可以（这确实是IE的Bug）。为了修复这个问题，你可能需要增加 width:auto\9 来针对IE8 hack。
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
灵活的嵌入视频
为了让嵌入的视频更灵活，我们也会使用上面的技巧。因为未知的原因，max-width:100%(针对嵌入的元素)并不被Safari所支持。在这方面我们可以用 width:100% 来替代。
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
初始化meta标签
通常，iPhone Safari 浏览器会缩放HTML页面来适应iPhone的屏幕。下面的 meta 标签将会告诉iPhone Safari 浏览器去使用设备的宽度来作为视窗的宽度，而不去初始的缩放。
<meta name="viewport" content="width=device-width; initial-scale=1.0">
最终效果
查看最终效果，然后缩放你的浏览器看效果。别忘记在iPhone，iPad,Blackberry上面查看效果，使用 Android 手机查看移动版本。
总结
1.媒体查询技术的向后兼容
css3-mediaqueries.js 能够使不支持媒体查询技术的浏览器支持这种技术。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
媒体介质查询技术
通过使用css根据视窗宽度来覆盖布局结构，创造出响应式设计的技巧。
@media screen and (max-width: 560px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: 100%;
float: none;
}
}
灵活的图片
使用 max-width:100% 和 height:auto 来使图片更灵活。
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
灵活的嵌入媒体
使用 width:100% 和 height:auto 使嵌入的视频更灵活。
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
Webkit 浏览器文本缩放：
使用 -webkit-text-size-adjust:none 禁用iPhone 浏览器的文本缩放功能。
html {
-webkit-text-size-adjust: none;
}
重置 iPhone 视窗 和 初始缩放
下面的meta标签将会在iPhone重置视窗和初始缩放:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
中文原文： 使用CSS3媒体查询技术创造响应式设计
英文原文： Responsive Design with CSS3 Media Queries
转载请注明以上信息，以表示对作者和译者的尊重，多谢！