媒体查询模板

个人blog，欢迎关注加收藏
/* 超小设备（手机，小于 768px） /
/ Bootstrap 中默认情况下没有媒体查询 /
@media (max-width: @screen-xs-max) { … }
/ 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }

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

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

eg:
@media (max-width: 779px) {
#top{display: none;}
#middle .col-xs-12{width: 90%;margin: auto;}
}
@media (max-width: 1085px) {
#middle .col-xs-0{display: none;}
#middle .col-xs-12{width: 80%;margin: auto;}
}

通用：

//css
/* 适配移动端 ≤768px */
@media screen and (max-width:768px){

}