响应式布局

响应式布局
    a.通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受 min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的 @media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设 备，将会运用更加的广泛。
    b.media query能够获取哪些值？
    设备的宽和高device-width，device-heigth显示屏幕/触觉设备。
    渲染窗口的宽和高width，heigth显示屏幕/触觉设备。
    设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。
    画面比例aspect-ratio点阵打印机等。
    设备比例device-aspect-ratio-点阵打印机等。
    对象颜色或颜色列表color，color-index显示屏幕。
    设备的分辨率resolution。
1.设置 Meta 标签
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2. 通过媒介查询来设置样式 Media Queries
    @media screen and (max-width: 980px) {
      #head { … }
      #content { … }
      #footer { … }
    }
    表示在屏幕宽度小于980像素时，定义各项元素布局效果
3. 宽度需要使用百分比
    #head { width: 100% }
    #content { width: 50%; }