媒体查询设置

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%;
  }
}

方法 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-width 和 max-width

媒体查询设置

Media query settings

html

css

tablet

media-queries