Web front-end: The principle of responsive implementation

The bootstrap grid must have been used by all of us. So how does it work? Query and define good classes through media. For direct use

1, the first definition of a good CSS class.

Define the width
. col-xs-1{width:8.333333%}. col-xs-2{width:16.66667%}.
col-xs-3{width:25%}
. col-xs-4{width:33.33333%}. col-xs-5{width:41.66667%}. col-xs-6{width:50%}.
col-xs-7{width:58.33333 %}. col-xs-8{width:66.66667%}. col-xs-9{width:75%}. col-xs-10{width:83.33333%}.
col-xs-11{ width:91.66667%}
. col-xs-12{width:100%}

//define float
. col-xs-1,
. Col-xs-2,
. col-xs-3 ,
. col-xs-4,
. col-xs-5,.
col-xs-6,.
col-xs-7,. col-xs-8,
. col-xs-9
. Col-xs-10,
. col-xs-11,
. col-xs-12{
    float:left;
    min-height:1px;
    position:relative;
}

2, the introduction of CSS files. Called directly in the HTML element.

<div class= "Row" >
    <div class= "col-xs-4" >a</div>
    <div class= "col-xs-4" >b</div >
    <div class= "col-xs-4" >c</div>
</div>

3, when the screen >768px, sometimes we need to change, that is, let the elements float. Two lines become one line (=->–). You need to use the media query function.

@media screen and (min-width:768px) {
    . col-sm-1,.
    col-sm-2,
    . col-sm-3,
    . col-sm-4,
    . Col-sm-5,
    col-sm-6,
    col-sm-7,
    . Col-sm-8,
    . col-sm-9,
    . col-sm-10,. col-sm-11,. col-sm-12{
    Float:left;
    min-height:1px;
    Position:relative
    }

    . col-sm-1{width:8.333333%}. col-sm-2{width:16.66667%}. col-sm-3{width:25%}.
    col-sm-4{width: 33.33333%}. col-sm-5{width:41.66667%}. col-sm-6{width:50%}.
    col-sm-7{width:58.33333%
    }. col-sm-8{width:66.66667%}. col-sm-9{width:75%}. col-sm-10{width:83.33333%}.
    col-sm-11{width: 91.66667%}
    . col-sm-12{width:100%}
}