什么是响应式
顾名思义，就是同一个网站兼容不同的大小的设备。如PC端、移动端（平板、横屏、竖排）的显示风格。在不同屏幕分辨率的设备上显示不同的网页风格。
需要用到的技术
1. Media Query（媒体查询）
用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸，是否可触摸，屏幕精度，横屏竖屏等信息。
<link rel="stylesheet" media=”screen and (max-device-400px)” href=”tinyScreen.css”/>
或
@media screen and (min-1366){
background-color:#FF6699;
}
2. 使用em或rem做尺寸单位
用于文字大小的响应和弹性布局。
3. 禁止页面缩放
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />
4. 屏幕尺寸响应
a) 固定布局：页面居中，两边留白，他能适应大于某个值一定范围的宽度，但是如果太宽就会有很多留白，太窄会出现滚动条，在PC页面上很常见。
b) 流动布局：屏幕尺寸在一定范围内变化时，不改变模块布局，只改变模块尺寸比例。比固定布局更具响应能力，两边不留白，但是也只能适应有限的宽度变化范围，否则模块会被挤（拉）得不成样子。
c) 自定义布局：上面几种布局方式都无法跨域大尺寸变化，所以适当时候我们需要改变模块的位置排列或者隐藏一些次要元素。
d) 栅格布局：这种布局方式使得模块之间非常容易对齐，易于模块位置的改变用于辅助自定义布局。
几种布局方式：
自适应布局：
解决如何才能在不同大小的设备上呈现同样的网页(页面的内容和布局不改变)
需要分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
响应式布局：
根据不同的设备做出相应的调整，调整布局或是元素（页面的内容和布局是有改动的）
例如导航栏在大屏幕下是横排，在小屏幕下是竖排。
流式布局：
页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。
（1）布局特点：屏幕分辨率变化时，页面里元素的大小会变化但是布局不变。【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】
（2）设计方法：使用百分比定义宽度，高度大都用px来固定住，往往配合max-width/min-width等属性控制尺寸流动范围以免太大或者过小影响阅读。
缺点：主要问题是如果屏幕尺度跨越太大，那么相对其原始设计而言，过大或过小的屏幕上不能正常显示，因为宽度使用百分比定位，但是高度和文字大小等都用px固定，所以大屏幕手机的显示效果会变成有些页面元素宽度被拉得很长。