一、概念

• CSS媒体查询
  一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成， 例如 宽度，高度和颜色。这些表达式描述了媒体特征， 最终会被解析为true或false。 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型， 并且所有的表达式的值都是true，那么该媒体查询的结果为true。在CSS3中添加的媒体查询，允许内容的呈现针对一个特定范围的输出设备而定制，而不必改变内容本身。
• flex布局
  Flexbox布局（Flexible Box）模块旨在提供一个更佳有效的布局方式，更好的控制项目的对齐和自由分配容器空间，即使它们的大小是未知的或动态的。因此得其名"flex"。
  1.用来为盒状模型提供最大的灵活性。
  2.任何一个容器都可以指定为flex布局
  3.设为flex布局后，子元素的float、clear、vertical-align属性将消失。
  4.采用flex布局的元素，称为flex容器，简称容器。
  5.它的所有子元素自动成为容器成员，称为flex项目，简称项目。
  6.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
• 栅格系统
  栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
  更多http://v3.bootcss.com/css/#grid

二、媒体查询demo