使用CSS3媒体查询技术创造响应式设计

显示器的分辨率的范围越来越宽泛了,从苹果的 320px(iphone)到 2560px(大显示器其)甚至更大。用户浏览网页的的设备也不仅仅是桌面电脑了。现在用户使用手机,上网本,平板电脑设备如iPad 或者 Playbook 等来登录网站。因此传统的固定宽度的设计的方法将不再适用。网页设计需要更广的适应性。布局需要能自动适应的分辨率和解析设备。下面的教程将会大家展示如何通过HTML5和 css3 的媒体介质查询技术 创建跨浏览器的响应式设计,

View Demo Responsive Design

Download Demo ZIP

看效果先

在我们开始之前,先让我们看看最终的效果final demo。缩放你的浏览器来看其布局的基于视窗的变化。

overview

更多的例子

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时,将会扩展内容容器和边栏为全部宽度时期成为单独一列布局。

overview

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">

最终效果

final demo

查看最终效果,然后缩放你的浏览器看效果。别忘记在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
转载请注明以上信息,以表示对作者和译者的尊重,多谢!