自适应，响应式样式

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
body {
    width:1024px;
    margin: 0 auto;
font: normal 100% "microsoft yahei", Arial, Helvetica, sans-serif;
color: #333;
    font-size: 14px;
    padding:0;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
}
*{margin:0;padding:0;}
div,ul,a,li,img,p{
box-sizing:border-box;
}
ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
    margin:0;
    padding:0;
    border:none;
    list-style:none;
}
input {border:none;}
.lf   {float:left;}
.rt  {float:right;}
.clear  {clear:both;}


a{
    text-decoration:none;
}
.col-1{width:8.33333%}
.col-2{width:16.66667%}
.col-3{width:25%}
.col-4{width:33.33333%}
.col-5{width:41.66667%}
.col-6{width:50%}
.col-7{width:58.33333%}
.col-8{width:66.66667%}
.col-9{width:75%}
.col-10{width:83.33333%}
.col-11{width:91.66667%}
.col-12{width:100%}
[class^="col-"]{
    float:left;
}
img{
    max-width: 100%;
}


div:after{
    
    content:"";
 
    display:block;  
    clear:both


}


div:before{
 
   content:" ";    
   display:table;


}
/引bootstrap.css的html样式引入
//响应式样式
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */


/* 小型设备（平板电脑，768px 起） */
@media (min-width:768px) { ... }


/* 中型设备（台式电脑，992px 起） */
@media (min-width:992px) { ... }


/* 大型设备（大台式电脑，1200px 起） */
@media (min-width:1200px) { ... }


Class 前缀 .col-xs- .col-sm- .col-md- .col-lg- 
















不引bootstrap.css的homePage.css文件响应式样式
/*通用*/
body {
    width:100%;
    margin: 0 auto;
    font: normal 100% "microsoft yahei", Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 1em;
    padding:0;
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
}
div,ul,a,li,img,p,input,textarea,span,b{
    box-sizing:border-box;
}
ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd {
    margin:0;
    padding:0;
    border:none;
    list-style:none;
}
input {border:none;}
.lf   {float:left;}
.rt  {float:right;}
.clear  {clear:both;}


a{
    text-decoration:none;
    cursor:pointer;
}
img{


    max-width: 100%;
}
@media screen and (max-width:767px){
    body{
        background-color: #C90028;
    }
}
@media screen and (min-width:768px){


}