响应式设计

这是lz在学习相应式web设计时，看到的一篇国外的学习文章，便把它翻译过来，方便自己和想要学习的人~~~~~~

随着今天的发展，各种屏幕的分辨率的范围也覆盖了由320px（iphone)到2560px（大型的设备）甚至更高。所以用户不再只是用台式电脑来浏览网页。更多的是使用手机、小笔记本,平板电脑iPad或剧本等访问网页。所以，传统网页固定宽度的设计不再适合，而应使得网页设计具有自适应性。布局需要自动调整以适应所有显示分辨率和设备。而本教程将向您展示如何使用HTML5和CSS3媒体设计查询创建一个跨浏览器的响应式网页。

首先，我们来看下它的一个应用

在你开始之前，先点下图片链接来查看这个示例，并调整你浏览器窗口的大小来查看其基于浏览器窗口宽度改变其自适性。

在查看该网页后，我们重新回来头来理解下这网页的结构。

该页面将容器宽度设置为980px,优化解决了比1024px还高的其他视图窗口的显示。并使用媒体查询来检查窗口大小是否小于980px,进而将网页布局平滑过度为合适的宽度大小。而如果视窗是小于650 px,它将扩展内容容器和侧边栏至全宽度大小，形成单个列布局。

如下图所示：

HTML代码，这里展示的部分为页面的主体结构部分

<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

引入这个js主要了为了解决浏览器中对HTML5中一些新增的标签进行兼容，而一般会出现问题的多为IE9以下浏览器，这里便是主要正对IE兼容问题

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

CSS

以块级重置HTML5元素

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

主体部分CSS样式

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

接下借助CSS3媒体查询进行流式布局

在这里需要注意的是Internet Explorer 8或旧版本不支持CSS3媒体查询。 但我们可以通过添加css3-mediaqueries .js启用它.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

接下来不同，通过媒体查询进行断点的设置

    一、视窗小于980 px(流体布局)

 视窗小于980 px,以下规则将适用:

【1】pagewrap =重置宽度为95%

【2】content=重置宽度为60%

【3】边栏=重置宽度为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;
	}

}

二、视窗小于650 px(单列布局)

接下来对视窗宽度小于650px进行样式设置

header=高度重置为auto
searchform =重新放置searchform ,top=5px
main-nav =positon定位属性值重置为static
site-logo =positon定位属性值重置为static
site-description =positon定位属性值重置为static
content=将宽度设置为auto(进行单栏布局）并清除浮动，即float：none;
aside=重置到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;
	}

}

Viewport Smaller Than 480px

CSS后他将视窗是否小于480 px，即横向的iPhone屏幕的宽度

html =禁用文本大小调整。默认情况下,iPhone扩大文本大小,所以读起来更舒适。您可以通过添加禁用文字大小调整-webkit-text-size-adjust:none;

@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和height属性可以在IE7兼容，但不是在IE8中不兼容，为了解决这个问题，我们可以引入 width:auto\9 for IE8

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

弹性灵活嵌入视频（方法同上）

.video embed,
.video object,
.video iframe {
	width: 100%; 
	height: auto;
}

初始规模Meta标签(iPhone)

默认情况下,iPhone Safari收缩HTML页面以便适合在ipone上显示。 下面的meta标签告诉iPhone Safari使用设备的宽度作为浏览器窗口的宽度和禁用最初的规模。

<meta name="viewport" content="width=device-width; initial-scale=1.0">

最后对完成的demo在不同设备上进行测试。