Question

以下是我已经想出的媒体查询，我将用作我将要做的每个项目的默认设置。

@media only screen and (min-width : 320px) {}
@media only screen and (min-width : 480px) {}
@media only screen and (min-width : 768px) {}
@media only screen and (min-width : 992px) {}
@media only screen and (min-width : 1200px) {}

现在，我面临的问题是，当我尝试在768上改变某些东西时，它也会在320上改变。我希望更改示例徽标，如果我将其隐藏在768上它应该只在768上不可见，而在这种情况下，我必须手动继续每个查询并使其可见。

我也尝试了min-width和max-width。移动大小为min-width，大尺寸为max-width，但没有运气。

如果我使用固定查询，那么我也必须为每个查询编写代码。

那么，我如何使它仅适用于单一尺寸而不影响其他尺寸，最重要的是不要为每种尺寸编写代码。

Answer 1

@media screen and (min-width: 480px) and (max-width: 767px) {
    // applied  only between 767 px and 480px
}

Answer 2

它会，为了避免你需要为下面的所有决议写具体。例如：如果您在768中隐藏徽标，则会影响480,320，。为了摆脱你需要写入480，特定的标识是可见的，所以它也将反映在320.

/* #### CSS that's applied when the viewing area's width is 768px or less #### */
@media screen and (max-width: 768px){    

  div#logo{
    display: none;
  }
}

要在480和320中看到徽标，请尝试这样：

 @media screen and (max-width: 480){        

      div#logo{
        display: none;
      }
    }

有关详细信息，请 Reference link

CSS Media Query也会影响其他查询

2 个答案: