媒体查询取消其他媒体查询 [英] Media query canceling other media queries
问题描述
我很困惑，因为如果宽度小于748px，标志应该被隐藏。
I'm confused because the logo should be hidden if width is less than 748px. However all sizes below 960px width show the logo.
这里缺少什么？
推荐答案
（在屏幕截图中）我看到 max-width：768px 媒体查询在 max-width：960px 之前声明为，这是不正确的。仅使用 max-width 的媒体查询应按降序排序。让我们假设您以此顺序声明媒体查询：
(In the screenshot of the screen) I see that the max-width: 768px media query is declared before max-width: 960px which is incorrect. Media queries that only use max-width should be sorted descending. Let us assume that you declare media queries in this order:
-
（max-width：768px） -
（max-width：960px）
(max-width: 768px)(max-width: 960px)
如果你的屏幕是400px宽，那么两个媒体查询将匹配条件。
If your screen is 400px wide then both media queries will match the condition. In this case the media query block declared later wins.
解决方案：
排序您的最大宽度规则递减
Sort your max-width rules descending (larger widths first).
或使用互斥媒体查询块，例如：
Or use mutually exclusive media query blocks such as this:
-
（min-width：961px） -
（min-width：769px）and max-width：960px） -
（max-width：768px）
(min-width: 961px)(min-width: 769px) and (max-width: 960px)(max-width: 768px)
在这种情况下，顺序无关紧要。
In this case order does not matter.
这篇关于媒体查询取消其他媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
