响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

1.1响应式原理

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备划分

1. 超小屏幕（手机）  尺寸：<768px
2. 小屏设备（平板）  尺寸：>=768px~<992px
3. 中等屏幕（桌面显示器）尺寸：>=992px~<1200px
4. 宽屏设备（大桌面显示器）尺寸： >=1200px

1.2 响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。

原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

平时我们的响应尺寸划分：

1. 超小屏幕（手机，<768px）  设置宽度为：100%
2. 小屏设备（平板>=768px~<992px）  设置宽度为：750px
3. 中等屏幕（桌面显示器>=992px~<1200px）设置宽度为：970px
4. 宽屏设备（大桌面显示器>=1200px）尺寸设置宽度为：1170px

1.3案例

需求分析：

1. 当我屏幕大于等于768像素，我们给布局容器container宽度为750px。

2. container里面包含8个小li盒子，每个盒子的宽度定为93.75px（750/8），高度为30px，浮动一行显示。

3. 当屏幕缩放，宽度小于768像素的时候，container盒子宽度修改为100%宽度。

4. 此时里面的8个li，宽度修改为33.33%，这样一行就只能显示3个li，剩余下行显示。

扩展内容

CSS中Media Query（媒介查询/媒体查询）

通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。如：width会有min-width和max-width媒介查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

Media Query能够获取哪些值？

• 设备的宽和高device-width，device-height显示屏幕/触觉设备。
• 渲染窗口的宽和高width，height显示屏幕/触觉设备。
• 设备的手持方向，横向还