Question

我有过与基金会合作的经验。所以我开始使用基础媒体查询规则来创建响应式网站。

// 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 */

这是我的问题：我试图隐藏在桌面版中显示的移动设备中的菜单栏（就像基础中的show-for-small）。所以我在媒体查询@media only屏幕和（max-width：40em）中定义了移动设备的样式。令人惊讶的是它没有用。所以我在上面提到的规则之前添加了以下规则，@ media only screen {}，然后它就可以了。

我还尝试了@media only屏幕和（min-width：5 em）和（max-width：40em）的组合。它也没用。

我的页面中也定义了视口元标记。任何人都可以解释我为什么会这样发生???

Answer 1

我认为问题可能与css特异性有关（一个命令具有更高的优先级）那么试着放 @media only screen和（max-width：40em）在你的最后一个命令中并检查浏览器中的元素以了解此命令是否被其他命令覆盖当使用bootstrap时，这是我发生的最多事情，希望这对你有所帮助

Answer 2

你必须为你的元素提供隐藏的小类，以便它不会出现在移动屏幕上：Know as visibility classes

我不理解基础媒体查询工作背后的逻辑

2 个答案: