响应式布局概念及bootstrap栅格系统简单的简单实现

响应式布局

• 概念：对不同屏幕尺寸做出响应，并进行相应布局
• 原理：使用媒体查询设置不同的断点，进行不同css布局响应
• 优点：一个网站可以兼容多种终端，不需要重复开发
• 缺点：工作量大、代码累赘、加载时间长、效率低、冗余代码较多
• 适用场景：结构比较简单，展示型网站
• 不适用场景：交互较多，功能性的网站不适用

常用断点设置：

1. xs(超小屏): < 576px
2. sm(小屏幕): 576px(含) - 768px
3. md(中屏幕): 768px(含) - 992px
4. lg(大屏幕): 992px(含) - 1200px
5. xl(超大屏幕): > 1200px(含)

栅格系统

• 栅格是响应式布局的一种实现方式
• 将页面栅格化
• 一般将水平划分为12列，根据媒体查询监听缩放，决定元素占用几列
• container提供容器
• row是为了清除浮动，至于为什么要清楚浮动和怎样清楚浮动，可以参考这里：链接
• 实现方式：
  1. 利用float：left属性，控制子元素的浮动、挤压、排列。
  2. 利用flex布局，实现主轴wrap挤压换行排列

	//示例调用代码
    <div class="container">
        <div class="row">
            <div class="col-1">1</div>
            <div class="col-1">2</div>
            <div class="col-1">3</div>
            <div class="col-1">4</div>
            <div class="col-1">5</div>
            <div class="col-1">6</div>
            <div class="col-1">7</div>
            <div class="col-1">8</div>
            <div class="col-1">9</div>
            <div class="col-1">10</div>
            <div class="col-1">11</div>
            <div class="col-1">12</div>
        </div>
    </div>

五个断点的class属性，代表不同屏幕下的适配方式：

	col-：xs(超小屏): < 576px
    col-sm-: sm(小屏幕): 576px(含) - 768px
	col-md-: md(中屏幕): 768px(含) - 992px
	col-lg-: lg(大屏幕): 992px(含) - 1200px
	col-xl-: xl(超大屏幕): > 1200px(含)

    col-1：就代表超小屏幕下占据1列
    col-2：就代表超小屏幕下占据2列
    col-12：就代表这个元素在超小品谷下占据一整行

    col-sm-1：就代表小屏幕下占据1列
    col-sm-2：就代表小屏幕下占据2列

就近原则：如果屏幕是在xl中，就会先找自己自己对应的col-xl-样式，如果没有，就往下接着查找col-lg-样式，直到找到为止。

其他属性：

	col-md-offset-4: 中等屏幕偏移4列
    col-md-push-4：中等屏幕向右偏移4列
    col-md-pull-4：中等个屏幕向左偏移4列

    d-xs-none d-md-block：xs不显示，md显示

栅格系统CSS部分实现代码：

.container {
    width: 100%;
    margin: 0 auto;
}

/* 写的时候从小到大写，样式优先级问题，如果满足md，就会覆盖sm */
/* sm */
@media (min-width: 576px){
    .container{
        width: 540px;
    }
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{
        float: left;
    }
    
    .col-1{
        width: 8.333333%;
    }
    .col-2{
        width: 16.666666%;
    }
    .col-3{
        width: 25%;
    }
    .col-4{
        width: 33.333333%;
    }
    .col-5{
        width: 41.666666%;
    }
    .col-6{
        width: 50%;
    }
    .col-7{
        width: 58.333333%;
    }
    .col-8{
        width: 66.666666%;
    }
    .col-9{
        width: 75%;
    }
    .col-10{
        width: 83.333333%;
    }
    .col-11{
        width: 91.666666%;
    }
    .col-12{
        width: 100%;
    }
}
/* md */
@media (min-width: 768px){
    .container{
        width: 720px;
    }
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
        float: left;
    }
    
    .col-md-1{
        width: 8.333333%;
    }
    .col-md-2{
        width: 16.666666%;
    }
    .col-md-3{
        width: 25%;
    }
    .col-md-4{
        width: 33.333333%;
    }
    .col-md-5{
        width: 41.666666%;
    }
    .col-md-6{
        width: 50%;
    }
    .col-md-7{
        width: 58.333333%;
    }
    .col-md-8{
        width: 66.666666%;
    }
    .col-md-9{
        width: 75%;
    }
    .col-md-10{
        width: 83.333333%;
    }
    .col-md-11{
        width: 91.666666%;
    }
    .col-md-12{
        width: 100%;
    }
}
/* lg */
@media (min-width: 992px){
    .container{
        width: 960px;
    }
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12{
        float: left;
    }
    
    .col-lg-1{
        width: 8.333333%;
    }
    .col-lg-2{
        width: 16.666666%;
    }
    .col-lg-3{
        width: 25%;
    }
    .col-lg-4{
        width: 33.333333%;
    }
    .col-lg-5{
        width: 41.666666%;
    }
    .col-lg-6{
        width: 50%;
    }
    .col-lg-7{
        width: 58.333333%;
    }
    .col-lg-8{
        width: 66.666666%;
    }
    .col-lg-9{
        width: 75%;
    }
    .col-lg-10{
        width: 83.333333%;
    }
    .col-lg-11{
        width: 91.666666%;
    }
    .col-lg-12{
        width: 100%;
    }
}
/* xl */
@media (min-width: 1200px){
    .container{
        width: 1140px;
    }
    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12{
        float: left;
    }
    
    .col-xl-1{
        width: 8.333333%;
    }
    .col-xl-2{
        width: 16.666666%;
    }
    .col-xl-3{
        width: 25%;
    }
    .col-xl-4{
        width: 33.333333%;
    }
    .col-xl-5{
        width: 41.666666%;
    }
    .col-xl-6{
        width: 50%;
    }
    .col-xl-7{
        width: 58.333333%;
    }
    .col-xl-8{
        width: 66.666666%;
    }
    .col-xl-9{
        width: 75%;
    }
    .col-xl-10{
        width: 83.333333%;
    }
    .col-xl-11{
        width: 91.666666%;
    }
    .col-xl-12{
        width: 100%;
    }
}

.row{

}