我为手机创建了媒体查询

@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设置不同

最佳答案

方法A:

先写较大宽度的查询,再写较小宽度的查询,以便覆盖它们

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


方法B:

还定义最小宽度:

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


注意:我认为您同时不需要max-device-widthmax-width

关于html - 媒体查询设置,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35079229/

10-12 12:57
查看更多