html - 响应式设计的@media 查询(手机/平板电脑/桌面)

Question

以上是我的问题的 CSS。
我的 CSS 是否不正确以针对每个屏幕尺寸只显示一个类？

我已经为此做了一百万种不同的变体(当然，这是夸张的)，但我总是以略有不同但不正确的结果结束。

这次我最终显示了所有 3 个类，直到屏幕达到 480 像素。
然后只显示了我的 .desktop 类。

    /*Desktop Query*/
    @media only screen and (min-width: 768px) {
        .desktop {
            display: none;
        }
        .mobile, .tablet {
            display: block;
        }
    }

    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
        .mobile {
            display: none;
        }
        .desktop, .tablet {
            display: block;
        }
    }

    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 768px) {
        .tablet {
            display: none;
        }
        .mobile, .desktop {
            display: block;
        }
    }

这是我的 HTML:

    <div class="mobile">
        <main>
            <h2> </h2>
            <p> </p>
        </main>
    </div>

Answer 1

您的代码无法正确显示的问题在于，您确实将显示内容 100% 错误地反转了:

    /**Desktop Query*/
    @media only screen and (min-width: 768px) {
      .desktop {
        display: block;
      }
      .mobile, .tablet {
        display: none;
      }
    }

    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 768px) {
      .tablet {
        display: block;
      }
      .mobile, .desktop {
        display: none;
      }
    }
    
    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
      .mobile {
        display: block;
      }
      .desktop, .tablet {
        display: none;
      }
    }

请注意，我还将平板电脑查询移到了移动查询之上，因为媒体查询将从上到下顺序执行，这可以解释为什么您之前会得到奇怪的结果。

希望对您有所帮助! :)