本网站可以通过分类标签帮助你快速筛选出你想看的文章,记住地址:www.Facec.cc

@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)
{ //<=767的设备 } 手机
@media (min-width: 768px)
{ //>=768的设备 } 平板
@media (min-width: 992px)
{ //>=992的设备 } 电脑
@media (min-width: 1200px)
{ //>=1200的设备 } 大显示器

作者:皓月
链接:https://www.jianshu.com/p/3e12c41ed773
来源:简书

# css  

评论