1.背景介绍

随着智能手机的迅速发展，大众群体使用手机访问互联网的频率已经大大提升。

手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

传统的只能在pc端显示的网页，如何适应这个潮流，也成了人们开始关注和解决的问题。于是响应式布局的概念就被提出来了。

2.知识剖析

2.1什么是响应式

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。

2.2响应式的优点

1.响应式设计可以向用户提供友好的Web界面，同样的布局，却可以在不同的设备上有不同排版，这就是响应式最大的优点，现在技术发展日新月异，每天都会有新款智能手机推出。如果你拥有响应式Web设计，用户可以与网站一直保持联系，而这也是基本的也是响应式实现的初衷。

2.响应式在开发维护和运营上，相对多个版本成本会降低很多。也无须花大量的时间在网站的维护上

3.方便改动，响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

2.3响应式的缺点

1.为了适配不同的设备，响应式设计需要大量专门为不同设备打造的css及js代码,这导致了文件增大，影响了页面加载速度。

2.在响应式设计中，图片、视频等资源一般是统一加载的，这就导致在低分辨率的机子上，实际加载了大于它的显示要求的图片或视频，导致不必要的流量浪费，影响加载速度；

3.局限性，响应式不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，对设计样式不好控制，代码过多会影响运行速度。

3.常见问题

如何实现响应式?

4.解决方案

1.流式布局

用灵活的网格搭建一个网站布局，它可以动态的调整以适应于任何宽度。网格布局使用相对长度单位.

这些相对长度多用于网格，诸如宽度，间距或是留白等属性。

为了更好的控制流式布局，可以使用最小宽度（min-width），最大宽度（max-width），最小高度（min-height）和最大高度（max-height），把他们应用到容器元素(container)上。

vw:视窗宽度;vh:视窗高度;vmin:视窗最小尺寸;vmax:视窗最大尺寸;

2.媒体查询 MediaQuery

自动探测屏幕宽度，然后加载相应的CSS样式,为目标设备提供有针对性的样式，在响应式设计中发挥作用。

@media all and (min-width: 800px) and (max-width: 1024px) {...}

在搭建响应式网站时，应该可以适应各种不同视窗尺寸，而不需要考虑设备的分辨率。设置断点只是在网站布局被破坏，看起来很怪或是内容无法显示的时候才需要设置。

3.viewport

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

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

4.流式媒体

当视窗开始改变尺寸时，媒体大小并不总是做适当改变的。所以图片，视频以及其他媒体类型需要在视窗改变的情况下，按照比例改变大小。

通过使用最大宽度值为100%，是一个快速实现媒体按照比例缩放的方法。这样做可以确保在视窗变小的情况下，任何媒体可以根据他的容器宽度，按照比例缩放。

img, video, canvas{

max-width: 100%;

}

5.编码实战

demo1,2为响应式网站实例，demo3为响应式网站的设计

demo1

demo2

demo3