css响应式布局

按照屏幕大小进行动态的响应，快速的反应让所有的屏幕都可以得到很好的显示

1.常见的布局方案

固定布局：
以像素为页面基本单位，不管页面设备屏幕及浏览器宽度，只设计一套尺寸
​
可切换的固定布局：
同样以像素为基本单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别屏幕尺寸或浏览器宽度，选择最核酸的那套宽度布局
​
弹性布局：
以百分比为页面基本单位，可以适应一点范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展示最佳效果
​
混合布局
同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展示最佳效果；只是混合像素，和百分比两种为页面单位
​
布局响应：
对页面进行响应式设计实验，需要对相同内容进行不同宽度的布局设计，有两种方式：pc优先（从pc端开始向下设计）；
移动优先（从移动端向上设计）；无论基于那种模式设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）

2.媒体查询

1.模块中内容：挤压-拉布局不变

2.模块中内容：换行-平铺（布局不变）

3.模块中内容：删减-增加（布局不变）

4.模块位置变换 (布局改变)

5.模块展示方式改变：隐藏-展开（布局改变）

媒体查询的含义：
媒体查询可以让我们根据显示器的特性（如视口宽度，屏幕比例&#