用于响应式设计的@media 查询（移动/平板/桌面）答案

【问题标题】：@media queries for responsive design (mobile/tablet/desktop)用于响应式设计的@media 查询（移动/平板/桌面）
【发布时间】：2017-03-07 09:14:26
【问题描述】：

以上是我的问题的 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>

【问题讨论】：

这是我所有 3 个 html 的格式点（另外 2 个是 class="desktop" 和 class="tablet"）抱歉，额外的评论和它的格式，在帖子中包含 HTML 代码时遇到问题。

标签： html css

【解决方案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;
  }
}

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

希望这会有所帮助！ :)

【讨论】：

非常感谢您。我会立即移动我的查询。我遇到的另一个问题是我有 3 个
元素，我猜你只能有 1 个，所以我也修复了这个问题。再次感谢你，不再因为你而与我的狗大喊大叫。
很高兴听到这个答案为您解决了问题。请不要忘记通过单击投票按钮下方的灰色复选标记将解决方案标记为正确 - 这会将其从“未回答的问题”队列中删除，并将声誉授予提问者和回答者。当然，这么说，您没有义务将我的答案（或任何其他答案）标记为正确，尽管这确实有助于保持事情顺利进行:)
我现在有了，再次感谢您的帮助/指导。我一直为此脱发。
老实说，没问题！尽管您可能想研究媒体查询中的逻辑 (css-tricks.com/logic-in-media-queries)；只要记住它们是按顺序流动的，你会没事的 :) 另外，请记住实际考虑你想要显示的内容——例如，你想要以移动分辨率显示移动 div ;)

【解决方案2】：

我清理了您的示例，以便您更了解它。只需这样做就可以正常工作：

/*Desktop Query*/
@media only screen and (min-width: 768px) {
  body {
    background: black;
  }
}

/*Mobile Query*/
@media only screen and (max-width: 480px) {
  body {
    background-color: tomato;
  }
}

/*Tablet Query*/
@media only screen and (min-width: 481px) and (max-width:768px) {
  body {
    background: pink;
  }
}

【讨论】：