Css 我不理解基础媒体查询工作背后的逻辑 我有过与基金会合作的经验。所以我开始使用基础媒体查询规则来创建响应站点。 // Small screens @media only screen { } /* Define mobile styles */ @media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ // Medium screens @media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ // Large screens @media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */ // XLarge screens @media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ // XXLarge screens @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */

我的问题是： 我试图在手机上隐藏一个菜单，显示在桌面版本中，比如在小的基础上如何显示。因此，我在media query@media only屏幕内定义了移动设备的样式，最大宽度：40em。令人惊讶的是，它不起作用。因此，我在上述规则之前添加了以下规则，@media only screen{}，然后它就工作了

我还尝试了@media-only屏幕和最小宽度：5 em和最大宽度：40 em的组合。它也不起作用

---

我的页面中还定义了视口元标记。有人能解释一下为什么会发生这种情况吗？

我认为问题可能与css的特殊性有关，一个命令的优先级更高 那么，试着把 @仅介质屏幕，最大宽度：40em 在你最后的命令中 并检查浏览器中的元素，以了解此命令是否被其他命令覆盖

---

这是我在使用bootstrap时遇到的最多的事情，希望这能帮助你

你必须给你的元素一个小类的隐藏，这样它就不会出现在移动屏幕上：

谢谢你Mohamed！！。当我最后一次使用@media-only屏幕和最大宽度：40em时，它实际上起到了作用。你能解释一下你所说的特殊性是什么意思，以及它是如何确定优先级的吗？特殊性决定了浏览器应用哪种CSS规则，这通常是CSS规则不适用于某些元素的原因。最后一个命令具有一定的优先级，但并非在所有情况下都是如此。本主题旨在更详细地解释这一点，您可以在@SharanAinapurapu检查它