响应式Web设计是关于使用HTML和CSS自动调整，隐藏，缩小或放大网站的大小，以使得它在所有设备（台式机、平板电脑和手机）上看起来都有很合适的效果显示。
关于响应式网页设计我们需要了解几个概念：
-
什么是响应式网页设计
RWD（Responsive Web Design），可以使我们的网页在任何设备上都是美观好看的，仅仅使用HTML和CSS，它不是程序或者是JavaScript。
-
什么是视窗
指的是用户在网页上的可见区域。
-
什么是网格视图
是指更进一步检查细节的最佳模式。
-
什么是媒体查询
媒介查询是CSS3中引入的CSS技术。
设置视窗
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
viewport 元素为浏览器提供有关如何控制页面尺寸和缩放放的说明；
width=device-width 部分将页面宽度设置为遵循设备的屏幕宽度；
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。
不同尺寸下的响应式布局效果图：
responsive3.png
responsive2.png
responsive1.png
