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

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

希望这有帮助！：）

Answer 2

我清理了你的例子，这样你就可以更有意义了。通过这样做可以正常工作：

{{1}}

@media查询响应式设计（手机/平板电脑/台式机）

2 个答案: