3步完成响应式设计[译文]

在当前响应式设计对于开发无疑是件大事儿，如果你还不了解响应式设计，可以查看我最近贴出来得关于[响应式网站]清单。对于新手，响应式设计听起来似乎有些复杂，事实上它远比你想象的要简单。我写了这个快速教程，帮助你迅速理解响应式设计。我保证你可以在3步内理解基本的响应式设计逻辑以及media query概念(已假设你已经掌握了css得基本知识)

####Step1. Meta标签(查看Demo) 大多数手机浏览器通过viewport宽度缩放html页面去适应手机屏幕。你可以使用viewport标签去重置这个值。下面关于viewport的代码告诉浏览器viewport宽度值设置为设备宽度并且禁用了初始缩放,将这个meta标签放置到<head>里

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

IE8以及以下版本不支持media query。你可以引入media-queries.js或respond.js去使它们变得可以支持media query。

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

####Step2. HTML结构

在我们的例子中，我们有一个具有header，content，sidebar以及footer的简单页面。header具有固定的高度180px,content容器宽为600px,sidebar宽为300px。

page-structure

####Step3. Media queries CSS3 media query是响应式设计的一个小技巧。它有点类似写if else语句，根据指定的viewport宽度告诉浏览器如何渲染一个页面根据

下面的一组规则将会在viewport宽度在980px或更小的时候生效。基本上，我把所有容器的宽度单位从像素(px)设置为百分比值，以便让页面成为流动布局。

980px-or-less

下面的是当viewport<=700px时生效，指定了#content和#sidebar宽度为auto并删除了float属性，以使它们的宽度可以充满显示页面

700px-or-less

对于<=480px(手机屏幕),重置了#header的高度为auto,改变了h1的字体大小到24px并且隐藏了#sidebar

480px-or-less

只要你喜欢，你可以写更多的media query语句。我仅仅在这个demo中用到3个media query语句。media query的目的是根据不同的viewport宽度，使用不同的CSS规则以达到不同的布局。media query 语句可以被放置在不同的文件中，也可以放置在同一个样式表中。

####结论这个教程的目的是向你展示基本的响应式设计。如果你想要更深入一些的教程，可以查阅我之前的另一个教程 Responsive Design With Media Queries(ps：或者看我的翻译使用Media Query实现响应式设计)