@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) { //<=767的设备 } 手机
@media (min-width: 768px) { //>=768的设备 } 平板
@media (min-width: 992px) { //>=992的设备 } 电脑
@media (min-width: 1200px) { //>=1200的设备 } 大显示器
作者:皓月
链接:https://www.jianshu.com/p/3e12c41ed773
来源:简书