@media的用法

文章地址: 摘自

@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
来源：简书