响应式数据及弹性布局

响应式数据的原理：

响应式网站设计：的理念集中创建页面的图片排版大小，可以智能的根据用户的行为以及使用设备的环境（系统平台，屏幕尺寸，屏幕定向等）进行相对应的自适应布局。简单来说就是***同一页面在不同屏幕尺寸下有不同的布局。
原理：动态的根据当前屏幕的宽度，动态的改变也买你盒子的宽度，盒子的显示或者隐藏。。

---

HTML响应式布局

HTML响应式布局实现
1、 viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度 （width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

2、所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

---

@media查询

css3@media 查询定义和使用：
1、 使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。
2、 例如屏幕宽度小于 500 像素则修改背景颜色(background-color)为红色。

@media screen and (max-width: 300px) {
    body {
        background-color: red;
    }
}

3、 小于768的为超小屏幕（手机）

768~992之间的为小屏设备（平板）

992~1200的中等屏幕（桌面显示器）

大于1200的宽屏设备（大桌面显示器）

但是我们也可以根据实际情况自己定义划分情况。

---