响应式布局

响应式布局

响应式布局: 就是一个网站能够兼容多个终端,而不是每一个终端都要做一个特定的版本
优点: 面对不同的分辨率特别的灵活
能够快速的解决多设备的适应问题 . 仅适用于中小型网站

缺点: 兼容各种设备导致工作量变大, 效率会降低
代码累赘, 会出现隐藏无用的元素, 导致加载时间过长

原理 : 通过媒体查询来制定某一个宽度区间的网页布局

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

媒体查询的语法
@media 媒体类型 关键字 媒体特性(即媒体条件) { 样式代码 }

@media  all/screen  and  (min-width: 768px) and (max-width : 992px) {   样式代码 }

需求:
1.超小屏幕时, 容器的宽度是100% 背景颜色是红色
1.小屏幕时, 容器的宽度是750px 背景颜色是绿色
1.中屏屏幕时, 容器的宽度是900px 背景颜色是pink
1.超大屏幕时, 容器的宽度是1180px 背景颜色是紫色

列 : col-*-*
        第一个* : 屏幕的大小
                    大屏  lg     >=1200px的宽度
                    中屏  md     992<=md <1200px
                    小屏  sm    768 <=  sm  < 992px
                    超小屏  xs    <768px
        第二个*  :  每一行的等分  默认是12等分  数字代表的是占多少等分
        push往后推    pull往前拉
        offset列偏移
        
        新增网格层适配了移动端；
       全面引入ES6新特性（重写所有JavaScript插件）；
       css文件减少了至少40%；
       所有文档都用Markdown编辑器重写；
       放弃对IE8的支持