文章地址: 摘自
@media screen and (max-width: 600px) {
/*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.class {
background: #ccc;
}
}
/*当屏幕尺寸大于900px时,应用下面的CSS样式*/
@media screen and (min-width: 900px) {
.class {
background: #fff;
}
}
总结:顺序不能反
@media (max-width: 767px) { … col-xs-3… } { //<=767的设备 } 手机
@media (min-width: 768px) { … col-sm-3… } { //>=768的设备 } 平板
@media (min-width: 992px) { … col-md-3…} { //>=992的设备 } 电脑
@media (min-width: 1200px) { … col-lg-3…} { //>=1200的设备 } 大显示器
作者:皓月
链接:https://www.jianshu.com/p/3e12c41ed773
来源:简书