响应式页面，是指一套页面，能够适配多种终端，比如宽屏pc电脑，平板，手机
响应式布局的三个CSS技术
    百分比流式布局（Liquid Layout）
    网格系统 (Grid System)
    @media 媒体查询
流式布局（Liquid Layout）就是百分比布局，也称非固定像素布局
    将页面的宽度设置成百分比，根据窗口的宽度来进行伸缩，不受固定像素的限制
    使用%百分比定义宽度（搭配min-*、max-*属性使用），高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。
栅格系统 (Grid System)
    Grid布局是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。它使用一系列容器、行和列来布局和对齐内容，这就意味着它可以同时处理列和行
媒体查询@media
    媒体查询@media由媒体类型和一个或多个检测媒体特性的条件表达式组成。通过媒体查询
    @media提供的一系列条件，我们可以对页面进行不同的布局组合，当媒体查询结果满足某
    些条件时，布局上进行相应的变化。例如，当分辨率小于多少时，窗口由320变为750，需要     调整对应的样式，一般和rem或em组合使用