所谓响应式Web设计，就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式,响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

基于HTML5和CSS3的响应式Web设计，并不需要依赖服务端或后端方案。

定义响应式Web设计

“响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时，他在A List Apart上写了一篇文章（http://www.alistapart.com/articles/responsive-web-design/），这篇文章综合运用了三种已有技术（弹性网格布局、弹性图片/媒体、媒体查询）实现了一个解决方案，就叫“响应式Web设计”。

最初，响应式设计是从“桌面”、固定宽度设计开始的。然后，到了小屏幕上，内容会重排，或者根据情况隐藏部分内容。可是，随着时间推移，人们发现，还是采用相反的设计思路更好，即先为小屏幕设计内容、样式，然后再向大屏幕扩展。

浏览器支持

浏览器支持一直是响应式Web设计面临的最大问题。市面上如此多的浏览器和设备，要想一个不落地支持并不现实。有时候是时间问题，有时候是预算问题，有时候两方面问题都有。

因此，最好的做法是先写一个较轻量的代码架构，然后根据所需的体验针对能力更强的浏览器进行扩展，包括视觉和功能。

至2015年中，全球IE6、IE7、IE8基本消失了，就连IE9的市场份额也降到了2.45%（IE10只占1.94%，IE11上升到了11.68%)

在通常情况下，写的网站必须在所有常用浏览器里表现正常。除了基本功能，有必要提前确定针对哪个平台要实现最强的功能，以便对其他平台上的视觉和功能作出相应取舍。

这是非常实际的做法，因为从最简单的“基本”体验开始，逐步扩充（所谓“渐进增强”）更容易。相反，先做出大而全的版本，然后再针对能力不足的平台寻找后备方案（所谓“平稳退化”）则要麻烦得多。

媒体查询

媒体查询可以让在某些条件下（如宽度和高度为多少的情况下）为网页应用样式。

不针对流行的设备宽度设置断点
所谓“断点”，就是某个宽度临界点，跨过这个点布局就会发生显著变化。

人们在刚开始使用媒体查询的时候，经常会针对当时流行的设备设置断点。当时，iPhone（320像素 × 480像素）和iPad（768像素× 1024像素）的宽度决定了断点。

不过，当时那样做并不好，现在来看就更不可取了。这是因为这样实际上把设计跟特定的屏幕大小绑定了。既然是响应式设计，那应该与显示它的设备无关才对，而不是只在某些屏幕中才最合适。

断点应该由内容和设计本身决定。

简单响应式示例

示例网页只有几个DIV、一张LOGO图、一张图片（看起来很好吃的松饼）、一两段文本和一个项目列表。

See the Pen 简单响应式示例 by XmoyKing (@xmoyking) on CodePen.

在没有CSS的情况下，移动设备默认会按980像素宽度来渲染网页，然后再把页面缩小呈现在视口当中。

浏览器中用于呈现网页的区域叫视口（viewport）。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。

<meta name="viewport" content="width=device-width">
这个视口的 <meta> 标签是一种非标准的（但却是事实标准的）方式，它告诉浏览器怎么渲染网页。在这里， <meta> 标签想表达的意思是：按照设备的宽度（ device-width ）来渲染网页内容。

max-width 保证所有图片最大显示为其自身的100%（即最大只可以显示为自身那么大）。此时，如果包含图片的元素（比如包含图片的 body 或 div ）比图片固有宽度小，图片会缩放占满最大可用空间。

要实现图片的自动缩放，也可以使用更通用的 width 属性，比如 width:100% 。然而，这条规则在这里的效果不同。如果给 width 属性设置一个值，那么图片就会按照该值显示，不考虑自身固有宽度。以例子中的LOGO（同样也是一张图片）为例，这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下（就像这里的LOGO一样），图片会被无谓地拉伸。

例子中只有一种媒体查询，即最小宽度媒体查询。
在这个媒体查询中设置的CSS规则，只在视口符合最小定义宽度条件时才会应用到网页。实际的最小宽度可以使用不同的长度单位指定，比如百分比、em、rem和px。在CSS中，最小宽度媒体查询是这样写的：

1
2
3

@media screen and (min-width: 50em) {
/* 样式 */
}

@media 指令告诉浏览器这里是一个媒体查询， screen （技术上讲，不需要在这里声明“screen”）告诉浏览器这里的规则只适用于屏幕类型，而 and (min-width:50em) 的意思是其中的规则只适用于视口宽度在50em以上的情况。

视口宽度达到600像素（或37.5rem）时，布局就会显得很难看。基本上所有浏览器默认的文本大小都是16像素，因此用像素值除以16就可以得到rem值。

根据视口大小实现不同的布局:
首先，不让题图太大，而是把它挪到右侧去。然后把介绍文字放在图的左侧。其实是模拟table的方式让图片文字呈现左右布局
然后，再把主要的文本内容，也就是如何制作松饼的方法，放在位于右侧带框线的配料表左下方。此处使用float的方式，让制作步骤包裹右浮的配料表

示例的不足之处

前面的示例远远不能涵盖最终想要实现的目标，同样也不代表响应式Web只能做到这些。

• 如果想让网页响应环境光线的变化呢？如果想在用户使用不同输入设备（手指而不是鼠标）时改变链接大小呢？如果想只用CSS实现动画和元素移动效果呢？
• 标记：怎么使用标记来构建页面，才能保证所有元素都具有语义，比如 article 、section 、 menu ，或者怎么让表单内置支持验证（不需要JavaScript参与）？怎么实现在不同视口中修改元素显示的次序呢？
• 图片：这个示例中使用了弹性图片，可是如果用户使用手机查看页面，那么他会下载一个很大的图片（至少2000像素以上），而在屏幕上又只能缩成几分之一显示。这样页面会显得很卡。还有更好的办法吗？
• LOGO和图标：这个示例使用的是PNG图片，但使用SVG（Scalable Vector Graphics，可伸缩矢量图）可以简单地适用各种分辨率。SVG图形看起来非常清晰，无论使用什么屏幕。