关于响应式

/*
    * 响应式布局 : 一个网站能够兼容多个终端,而不是为每一个终端做特定的版本
    * 优点 :
    * 面对不同的分辨率, 设备灵活性较强
    * 能够快捷的解决多个设备适应问题
    * 适合中小型网站
    * 缺点:
    * 兼容各种设备, 工作量较大, 效率不高
    * 代码累赘, 会出现影藏无用的元素, 导致加载时间长
    *
    * 原理 : 通过媒体查询来定制某个宽度区间的网页布局
    * 媒体查询 : 他能检测到宽度的设备, 通过不同的宽度, 显示不同的样式
    * */

    // 超小屏幕(移动设备)  768px以下
    // 小屏屏幕(平板设备)  768px-992px
    // 中屏屏幕(标屏设备)  992px-1200px
    // 大屏屏幕(宽屏设备)  1200px以上

    // 媒体查询的语法
    //  @media all/screen and  (min-width:768px) and (max-width:992px) { 样式属性}
    // @media  媒体类型  关键字  媒体特性(即媒体的条件) {样式代码}
    //注意 ; and 后面一定要有空格!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!