html - 媒体查询设置

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

方法一:

先写大宽度的查询，再写小宽度的查询，这样它们就可以覆盖它们

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

方法二:

同时定义最小宽度:

@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