Question

我为手机创建了媒体查询

@media screen and (max-device-width: 480px), screen and (max-width: 480px)  {  ...css here... body {width:50%;}

但我需要桌面

的查询

@media screen and (max-device-width: 750px), screen and (max-width: 750px)

如果我添加到@media桌面查询.body {width:100%;}，则设置也会在480px中更改。

我的问题是：我如何将480px css设置与750px css设置分开？

Answer 1

方法A：

在较小的宽度查询之前写入较小的宽度，以便它们可以覆盖它们

@media screen and (max-width: 750px){
  body{
    width:100%;
  }
}
@media screen and (max-width: 480px){
  body{
    width:50%;
  }
}

方法B：

定义min-width：

@media screen and (max-width: 750px) and (min-width: 481px){
  body{
    width:100%;
  }
}
@media screen and (max-width: 480px){
  body{
    width:50%;
  }
}

注意：我认为您不需要max-device-width和max-width

媒体查询设置

1 个答案: