【响应式】基本概念&设计技巧&开发流程&经验技巧&实例参考
【参考资料】（向伟大的作者们致敬！！！还有，人家我拼凑&修改&总结&揉入自己开发心得，也灰常不容易。筒子们，转载别忘了注明此文章地址！！&有错误请在评论中指出，谢谢！随着项目增加，会回头继续补充和扩展这文，当然也许跟这次总结一样，中间会隔上约一年的时间。）
http://www.alistapart.com/articles/responsive-web-design/
http://beforweb.com/node/6
http://kan.weibo.com/con/3524482191806133?_from=feed_wenzhang
http://blog.jobbole.com/30648/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://www.qianduan.net/responsive-web-design.html
http://www.webhostingbuzz.com/blog/2011/10/19/mobile-internet-trends/ （译文：http://blog.csdn.net/hfahe/article/details/7082718 ）
http://www.quirksmode.org/mobile/mobilemarket.html
http://coding.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/（译文：http://www.denisdeng.com/?p=324 ）
宽度选择通用型的 960
（960.gs）
http://grids.heroku.com/
http://www.bootcss.com/
http://twitter.github.com/bootstrap/index.html
http://www.bootcss.com/p/bsie/
响应式框架：
http://cjdsie.github.com/wirefy/getting-started.html
http://www.oschina.net/p/gumby
一、响应式网页基本概念及其来源
1、为什么需要响应式？
国外一些知名的科技媒体如Mashable, thenextweb最近都改版了，满满的填满整个屏幕，开始看还很不习惯，直到Mashable创始人撰文说他们采用了可适应网页设计（Responsive Web Design）（注：国内也译作“响应式网页设计”），而文章中也指出2013年将成为自适应网页设计之年，也就是HTML5。
所谓自适应网页设计，是由Ethan Marcotte在2010年提出的名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。简单来说就是同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout） 。
随着移动技术的普及，越来越多的人会通过不同的屏幕来浏览网页，2012年成为PC和mobile的分水岭，全球pc机的销售量低于移动终端。很多知名网站的流量都来自移动终端，比如mashable自己的流量就有30%来自移动终端，预计到2013年将会超过50%，可见，一个网站在提供pc机上良好的用户体验之外，还需要在不同的移动终端（PAD和智能手机）提供良好的网页浏览体验。这是自适应网页设计流行的前提之一。
2013年是自适应网页设计流行的第二点是，为了提供良好的用户体验，很多网站都制作了自己的APP，这不为一种好的方法，但这个成本也相对高昂，且推广也不是一件简单的事情，用户不会浏览一个网站就下载一个APP，根据Pew Research Center的数据显示，60%的平台电脑使用者还是更倾向于用浏览器来浏览网页而非App。
手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。于是，很早就有人设想，能不能”一次设计，普遍适用”，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局（layout）？
2、”自适应网页设计”的概念
最近出现了一门新兴的学科——“响应式建筑(responsive architecture)”——提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产“智能玻璃”：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。
2010年，Ethan Marcotte提出了”自适应网页设计“（Responsive Web Design）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。
简单来说，响应式网页设计（Responsive web design）是一种现代网页设计方法，基于CSS3的媒介查询（Media Query）特性使得网页适应不同设备，即根据设备的分辨率和缩放自动重新布局。
如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。
二、响应式网页设计
关于响应式网页设计，从设计师角度出发的文章并不多，我只能根据自己仅有的不多的经验来编排两句了。
从大屏幕到小屏幕的平稳退化
设计中遵从网格式布局（我更喜欢用流体式来形容，当页面所小时，右侧的内容仿佛因为排放不下而自由下落到新的一行。）
除部分ICON，元素高度都是动态变化的。
背景必须具有延展性。外延部分可以是小的填充图，也可以是颜色。
三、3步实现响应式网页制作
第一步：Meta标签（查看演示）
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
IE8或者更早的浏览器并不支持Media Query。你可以使用media-queries.js或者respond.js来为IE添加Media Query支持。
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
第二步：HTML结构
在这个例子里，我有一个包括头部、内容、侧边栏和页脚的基本页面布局。头部有固定的高度180像素，内容容器是600像素而侧边栏是300像素。
第三步：媒介查询-Media Queries
CSS3 Media Query-媒介查询 是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
当视图宽度为小于等于980像素时，如下规则将会生效。基本上，我会将所有的容器宽度从像素值设置为百分比以使得容器大小自适应。
然后为小于等于700像素的视图指定#content和#sidebar的宽度为自适应并且清除浮动，使得这些容器按全宽度显示。
对于小于等于480像素（手机屏幕）的情况，将#header元素的高度设置为自适应，将h1的字体大小修改为24像素并隐藏侧边栏。
你可以根据你的喜好添加足够多的媒介查询。我在示例中仅仅展示了3个媒介查询。媒介查询的目的在于为指定的视图宽度指定不同的CSS规则，来实现不同的布局。媒介查询可以写在同一个或者单独的样式表中。
最后结论
这个教程想要为你展示响应式设计的基本原理。如果你想要更多进阶的教程，请看看我之前的教程： 使用媒介查询进行响应式设计 。
四、开发技术点详解
1、液态网格和液态图片技术
说到创建液态页面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》，或是下载个样章先：“怎样创建弹性图片”。另外，Zoe的这篇“Essential Resources for Creating Liquid and Elastic Layouts.”提供了不少关于创建弹性网格和布局的教程、资源、创意指导和最佳实践方式。
从技术角度讲，虽然听上去这些都简单可行，但它比“将这些功能结合在一起”要复杂些。举个例子，仔细观察Ethan Marcotte提供的实例中的logo图片：
如果我们将浏览器窗口不断调小，会发现logo图片的文字部分始终会保持同比缩小，保证其完整可读，而不会和周围的插图一样被两边裁掉。所以整个logo其实包括两部分：插图作为页面标题的背景图片，会保持尺寸，但会随着布局调整而被裁切；文字部分则是一张单独的图片。
<h1id="logo"> <a href="#"><img src="site/logo.png"alt="The Baker Street Inquirer"/></a> </h1>
其中，<h1>元素使用插图作为背景，文字部分的图片始终保持与背景的对齐。
下面是参考文章：
Hiding and Revealing Portions of Images
Creating Sliding Composite Images
Foreground Images That Scale With the Layout
2、响应式网页中图片的处理：弹性图片和响应式图片
响应式Web设计的思路中，一个重要的因素是怎样处理图片方面的问题。有很多同比缩放图片的技术，其中有不少是简单易行的。其中，由Richard Rutter最先尝试的一种做法比较流行，即使用CSS的max-width属性。这个方法在Ethan Marcotte的液态图片一文中也有提到。img {max-width:100%;}。
“液态图片背后的思路，就是无论何时，都确保在其原始宽度范围内，以最大的宽度同比完整的显示图片。我们不必在样式表中为图片设置宽度和高度，只需要让样式表在窗口尺寸发生变化时辅助浏览器对图片进行缩放。”
由Filament Group提出的“响应式图片”技术思想，有助于解决上面提到的问题：不仅要同比的缩放图片，还要在小设备上降低图片自身的分辨率。
这个技术的实现需要使用几个相关文件，我们可以在Github上获取。包括一个JavaScript文件(rwd-images.js)，一个.htaccess文件，以及一些范例资源文件。具体使用方法可以参考Responsive Images的说明文档。大致的原理是，rwd-images.js会检测当前设备的屏幕分辨率，如果是大屏幕设备，则向页面head部分中添加BASE标记，并将后续的图片、脚本和样式表加载请求定向到一个虚拟路径“/rwd-router”。当这些请求到达服务器端，.htacces文件会决定这些请求所需要的是原始图片还是小尺寸的“响应式图片”，并进行相应的反馈输出。对于小屏幕的移动设备，原始尺寸的大图片永远不会被用到。
这项技术支持多数的现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox及一些旧浏览器中，则会优雅降级：我们仍可得到小图片的输出，但同时，原始大图也会被下载。
3、利用伪元素进行图片响应式加载
我们都知道可以用::before和::after伪元素+content属性来动态显示一些内容或者做其它很酷的事情，而且在CSS 2.1中即被支持。不过content属性在CSS 2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可以使用content属性了，这个方法就是结合css3 的attr属性和HTML自定义属性的功能：
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
然后用media query来动态赋值：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
当然，这种方法也有不足之处，比如PC端宽屏幕需要加载两个图片文件，然后我们也要为此准备多张图片文件等。
4、Media Queries
1）CSS1～3通用 Media Queries
CSS3支持CSS2.1所支持的所有媒体类型，例如screen、print、handheld等，同时添加了很多涉及媒体类型的功能属性，包括max-width(最大宽度)、device-width(设备宽度)、orientation(屏幕定向，横屏或竖屏)和color。在CSS3发布之后出现的新玩具，如iPad或Android相关设备，都可以完美的支持这些属性。所以我们可以通过media query为新设备设置独特的样式，而忽略那些不支持CSS3的台式机中的旧浏览器。
在Ethan的文章中，我们能看到一段media query使用实例：
<link rel="stylesheet"type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css"/>
代码本身可以很好的说明工作机制：如果页面通过屏幕呈现(非打印一类)，并且屏幕宽度不超过480px，则加载shetland.css样式表。要了解更多关于CSS3媒体新属性的信息，可以参考“The Orientation Media Query”一文。
我们可以创建多个样式表，以适应不同设备类型的宽度范围。Ethan的文章中的“Meet the media query”部分有更多的范例及解释。更有效率的做法是，将多个media queries整合在一个样式表文件中：
/* Smartphones (portrait and landscape) ----------- */
@media onlyscreen
and (min-device-width :320px)
and (max-device-width :480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media onlyscreen
and (min-width :321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media onlyscreen
and (max-width :320px) {
/* Styles */
}
上面的代码来自于Andy Clark创建的可以兼容各种主流设备的免费模板。这样整合多个media queries于一个样式表文件的方式，与通过media queries调用不同样式表的方式之间的区别与联系，可以参考“Hardboiled CSS3 Media Queries”一文。
2）CSS3 Media Queries
上面演示的一些代码范例是CSS2.1与CSS3通吃的。现在让我们来看看怎样使用CSS3专有的media queries功能来创建响应式Web设计。其中某些方法在当前就有切实的使用价值，不久的将来则一定会全部派上用场。
min-width和max-width这两个属性很靠谱。通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表；max-width则反之。
下面的几个示例中，我们使用的是将多个media queries整合在单一样式表中进行编码的句法。如前文所述，这样做更加高效，减少请求数量。
@mediascreenand (min-width:600px) {
.hereIsMyClass {
width:30%;
float:right;
}
}
上面代码中定义的类(hereIsMyClass)只有在浏览器或屏幕宽度超过600px时才会有效。
@mediascreenand (max-width:600px) {
.aClassforSmallScreens {
clear:both;
font-size:1.3em;
}
}
而这段代码的作用则相反：aClassforSmallScreens类只有在浏览器或屏幕宽度小于600px时才会有效。
可以看出min-width和max-width可以同时判断设备屏幕尺寸与浏览器实际宽度。有些时候，我们希望通过media queries作用于某种特定的设备，而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时，我们需要使用min-device-width与max-device-width，用来判断设备本身的屏幕尺寸。
@mediascreenand (max-device-width:480px) {
.classForiPhoneDisplay {
font-size:1.2em;
}
}
@mediascreenand (min-device-width:768px) {
.minimumiPadWidth {
clear:both;
margin-bottom:2pxsolid#ccc;
}
}
还有一些其他方法，可以帮我们有效的使用media queries锁定某些指定的设备。可以参考下面两篇出自Thomas Maier的文章：
CSS for iPhone 4 (Retina display)
How To: CSS for the iPad
对于iPad来说，orientation属性尤其有用。它的值可以是landscape(横屏)或portrait(竖屏)。
@mediascreenand (orientation:landscape) {
.iPadLandscape {
width:30%;
float:right;
}
}
@mediascreenand (orientation:portrait) {
.iPadPortrait {
clear:both;
}
}
不幸的是，这个属性目前确实只在iPad上有效。对于其他可以转屏的设备，譬如iPhone，可以使用min-device-width和max-device-width来变通实现；详情可以参考“Determine iPhone orientation using CSS”一文。
我们还可以将上述属性组合使用，来锁定某个屏幕尺寸范围：
@mediascreenand (min-width:800px) and (max-width:1200px) {
.classForaMediumScreen {
background:#cc0000;
width:30%;
float:right;
}
}
上面的代码可以作用于浏览器窗口或屏幕宽度在800px至1200px之间的所有设备。
其实，很多设计师和开发者仍会选择使用多个样式表的方式来实现media queries。如果从资源的组织和维护的角度出发，其益处确实高于效率的损耗的话，那么这样做也完全不坏：
<linkrel="stylesheet"media="screen and (max-width: 600px)"href="small.css"/> <linkrel="stylesheet"media="screen and (min-width: 600px)"href="large.css"/> <linkrel="stylesheet"media="print"href="print.css"/>
所以呐，凡事没有绝对，最好根据实际情况决定使用media queries的方式。比如，对于iPad，我们可以将多个media queries直接写在一个样式表中。因为iPad用户随时有可能切换屏幕定向，这种情况下，要保证页面在极短的时间内响应屏幕尺寸的调整，我们必须选择效率最高的方式。
3）利用JS解决CSS3独有Media Queries的兼容问题
JavaScript也是我们的武器之一，特别是当某些旧设备无法完美支持CSS3的media query时，它可以作为后备支援。幸运的是，已经有专门的JS库来帮助旧浏览器(IE 5+，Firefox 1+，Safari 2等)支持CSS3的media queries。使用方法很简单，下载css3-mediaqueries.js并在你的页面中调用它。
而下面的代码则演示了怎样使用简单的几行jQuery代码来检测浏览器宽度，并为不同的情况调用不同的样式表：
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
functionresizeWindow(e){
varnewWindowWidth = $(window).width();
// If width width is below 600px, switch to the mobile stylesheet
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href :"mobile.css"});
}
// Else if width is above 600px, switch to the large stylesheet
else if(newWindowWidth > 600){
$("link[rel=stylesheet]").attr({href :"style.css"});
}
}
});
</script>
类似这样的解决方案还有很多。所以我们要清楚，media queries不是一个绝对唯一的答案，它只是一个以纯CSS方式实现响应式Web设计思路的手段。借助JavaScript，我们则可以实现更多的变化。这篇“Combining Media Queries and JavaScript”向我们展示了JavaScript配合media queries的更多细节信息。
4、fluid grid(流体网格)
很多项目都在使用网格技术(或者叫栅格)，前几年960.gs很流行，但是随着屏幕分辨率的普遍提升，它已经不太适合当前需求了，于是最近几年fluid grid开始逐渐多了起来，这种技术其实也很简单，只是将格栅的单位由px变成%，用百分比来控制页面每列的宽度，从而实现宽度的自适应。
使用流体网格的网站能够根据屏幕宽度自动调整页面中每列的宽度，从而保证页面的完整展现和基本功能。这也是一种不错的方法。
5、flex box
flex box是css3中的新技术，它很强大，可以实现很多我们之前无法想象的自适应布局。有时我们希望网站能够以webapp的外观呈现给手机用户，flexbox是个不二的选择。比如，要实现下面这样的简单结构：
它很像一个app的结构，头部和底部固定，中间高度自适应，用flexbox可以简单实现：
.flex_wrap{
height:100%;
display: box;
display: -moz-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.flex_bd{
box-flex: 1;
-moz-box-flex: 1;
-webkit-box-flex:1;
background:#E7E7E7;
overflow-y:auto;
}
.flex_hd{
background:#16364C;
height:30px;
line-height:30px;
text-align:center;
color:#FFF;
font-weight:700;
font-family:14px;
}
.flex_ft{
background:green;
height:30px;
line-height:30px;
text-align:right;
}
<div class="flex_wrap"> <div class="flex_hd">前端观察</div> <div class="flex_bd"> <p>这里是主内容区</p> <p>这里是主内容区</p> </div> <div class="flex_ft"> <a href="http://www.qianduan.net/about" title="关于我们">关于我们</a> <a href="http://www.qianduan.net/copyright" title="版权声明">版权声明</a> <a href="http://www.qianduan.net/sitemap" title="网站地图">网站地图</a> </div> </div>
虽然这里还会有点儿问题，比如主内容区域内容太多会被隐藏掉，因为android webkit和iOS 5之前的mobile safari均不支持overflow:scroll属性，但是这个问题还是很好解决的，比如在里面嵌套一个子容器，用js来给定个高度并使用定位来实现滚动条从而完整展示内容，或者直接使用iscroll等js库来实现。好消息是，iOS5中safari开始支持overflow:scroll了。
五、经验技巧汇萃
1、禁用iPhone中的图片自动缩放
在iPhone及iPod Touch中，页面会被自动的同比例缩小至最适合屏幕大小的尺寸，x轴不会产生滚动条，用户可以上下拖拽浏览全部页面，或在需要的时候放大页面的局部。这里会产生一个问题，即使我们运用响应式Web设计的思想，专门为iPhone的小屏输出小图片，它同样会随着整个页面一起被同比例缩小，如下图左侧所示。
我们可以使用苹果专有的一些meta标记来解决类似的问题。在页面的<head>部分添加以下代码(详情可以参考Think Vitamin的相关文章)：
<metaname="viewport"content="width=device-width; initial-scale=1.0">
将initial-scale的值设定为“1”，即可覆写默认的缩放方式，保持原始的尺寸及比例。更多关于viewport meta标记的用法，可以参考苹果官方的文档。
2、元素隐藏：visibility和display的区别
从大屏幕过渡到小屏幕，部分元素需要隐藏。注意，不要使用visibility: hidden的方式，因为这只能使元素在视觉上不做呈现；display属性则可帮助我们设置整块内容是否需要被渲染［此处原文为“输出”］。对于移动设备来说，避免这些不必要的浪费还是很重要的。
3、触屏与鼠标的双控制
可以读读这篇“Designing for Touchscreen”，这里提到的很多建议即有利于改进针对触屏设备的设计方式，同时也不会削弱传统键鼠设备上的用户体验。比如，放在页面右侧的导航列表可以对触屏设备的用户更加友好。因为多数人习惯用右手点击操作，而左手负责握住设备；这样，放在右侧的导航列表即方便右手的点击，又可以避免被握着设备的左手不小心触碰到。而这一点与键鼠设备用户的习惯完全不矛盾。
4、pre标签
有的网站，比如，像前端观察这样的技术博客，会用pre来显示源代码，而浏览器对pre标签默认设置white-space:pre，这样，代码就不会换行，从而撑开子容器，造成内容被隐藏的问题：
右边的文字被隐藏掉了。
解决方法很简单：
pre{ white-space:pre-wrap word-wrap: break-word; word-break: break-all;/*如果要兼容IE，可以加上这句，连续字母断行的问题伤不起啊。。。。*/ }
当然，不只是pre标签，关键是white-space和word-break属性的值。
5、元素的相对大小设置：宽度和字体
让你整个Web元素都是相对的而不是绝对的，从这一个概念出发，我们可以给最外面的元素定义一个单位，然后其子元素和后代码元素都继承他。目前使用相对的单位有两种常见的：
1）百分比（%）方法：给主容器定认一个固定尺寸或者流体尺寸，然后给其每个子元素使用百分比（%）来计算各自的参数，比如说width/padding/margin等；
2）“em”单位：先在一个主容器中或者”<body>”中定义一个字体大小（font-size），把它做为基本单位，然后其他元素以此做为基准来计算出相关的值
“em”和“px”之间的转换是有些技巧的，如果你从来没有了解过他们之间的关系，我建议你先阅读一下这篇文章《CSS中强大的EM》，简单一点的，可以看看下图：
6、流动布局（fluid grid）
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
7、选择加载CSS
“自适应网页设计”的核心，就是CSS3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。
<link rel=”stylesheet” type=”text/css” media=”screen and (max-device-width: 400px)” href=”tinyScreen.css” />
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.css文件。
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 400px) and (max-device-width: 600px)” href=”smallScreen.css” />
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.css文件。
除了用html标签加载CSS文件，还可以在现有CSS文件中加载。
@import url(“tinyScreen.css”) screen and (max-device-width: 400px);
同一个CSS文件中，也可以根据不同的屏幕分辨率，选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
8、图片的自适应（fluid image）
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
//这只要一行CSS代码：
img { max-width: 100%;}
//这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
//老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
//此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: bicubic; }
//或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
});
9、Responsive布局技巧
在Responsive布局中，我们可以毫无保留的丢弃：
尽量少用无关紧要的div
不使用内联元素(inline)
尽量少用js或flash
丢去没用的绝对定位和浮动样式
屏弃任何冗余结构和不使用100%设置
有舍才有得，丢去了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？
使用HTML5 Doctype和相关指南
重置好你的样式（reset.css）
一个简单的有语义的核心布局
给重要的网页元素使用简单的技巧，比如导航菜单之类元素
使用这些技巧，是为了保持HTML简单干净。在页面布局的关键部分（元素）不要过分的依赖现代技巧来实现，比如说css3特效或者js脚本。
快速测试的方法（其实这是测试网页是否符合web标准的方法）：你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。
10、定义断点
定义断点，那么断点是什么？简单的描述就是，设备宽度的临界点，也就是前面大家比较关心的Medial Queries中的min-width和max-width值是什么？那么在Responsive设计中，常见的断点有六种，我们今后的Medial Queries条件判断就可以根据这六个断点来定。
主要的有：
第一个断点群体就是针对于智能手机设置，他的宽度是小于480px(
第二个断点是高智能移动设备，比如说Ipads设备，他的宽度是小于768px（
第三个断点就是针对于大设备，比如说PC端，他的宽度是大于768px(>768px)
为了完美一些，我们还可以添加另外几种断点：
添加一个小于320px的断点，针对于小型的移动设备；(
还可以添加适用于平板设备的断点，大于768px小于1024px(>768px 和
最后还可以为超宽的桌面设置一个断点，大于1024px(>1024px)
综合下来，设置断点把握三个要点：
满足主要的断点；
有可能的话添加一些别的断点；
设置高于1024px的桌面断点
如下图所示：
<meta name="viewport" content="initial-scale=1, user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no">
六、响应式设计实例
1、开发框架
320 and Up
Mobile Boilerplate
Golden Grid System
Gridless
Less Framework
1140 CSS Grid System
Fluid 960 Grid System
SimpleGrid
Skeleton
2、实用工具
Respond.js，让IE6-8支持meidia query
Responsive Design Testing 简单而方便的测试网站的响应性的工具，输入网址即可看到网站在不同分辨率下的表现
Resize My Browser 缩放浏览器工具，不过不支持chrome和opera浏览器
Media Query Bookmarklet 顾名思义，这是一个关于media query的书签工具
ProtoFluid 在线查看和调试网站对移动终端兼容性的工具，很赞
ScreenFly 和ProtoFluid类似
responsivepx 更直观的测试网站对不同分辨率的适配性
3、实例参考
mediaqueri.es
http://thenextweb.com