使用媒体查询的怪异行为

Question

我正在尝试使用“典型设备断点”进行简单的媒体查询，无论我如何更改，媒体查询总是在不应该发生的情况下被覆盖。 对此有很多帮助，不知道该怎么办。

Answer 1

此问题的症结似乎与 media queries do not affect specificity ：

您可能会认为媒体查询中的规则比同一个样式表中的其他样式规则具有某种优先级，但是没有。媒体查询本身没有特异性。

根据该文件中的行号，看起来您文件中的 some 定义早于实际​​选择器（706）在文件（531，535）中的定义，这可以解释为什么您的媒体查询已被覆盖：

/* Line 531 */
@media (min-width: 1200px) {
    #public-wrapper .home-page-hero.no-image.hero-accent-top-right { ... }
}

/* Line 535 */
@media (min-width: 1200px) {
    #public-wrapper .home-page-hero.no-image.hero-accent-top-right { ... }
}

/* Line 706 (since this is later, it's overridden the previous ones) */
#public-wrapper .home-page-hero.no-image.hero-accent-top-right { ... }

请尝试在.less文件中移动媒体查询，以确保它们出现在原始选择器之后 ，以确保它们不会被非媒体查询选择器覆盖。