CSS 媒体查询也影响其他查询

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

它会，为了避免您需要针对下面的所有解决方案编写特定的内容。例如：如果您在 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

Answer 2

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

CSS 媒体查询也影响其他查询

CSS Media Query is affecting other queries also

css

media-queries