CSS 不应用媒体查询答案

【问题标题】：CSS Not Applying Media QueryCSS 不应用媒体查询
【发布时间】：2018-04-06 08:26:38
【问题描述】：

我目前遇到以下问题：

我正在使用由 GULP SASS 处理的两个 CSS 文件，我在 HTML 的头部声明了它们，如下所示：

代码很简单，我这样做只是为了测试一下：

关于styles.scss：

h1 {
    color: #E5E1DD;
    font-family: 'Megrim', cursive;
    font-size: 6rem;
    margin-bottom: 0;
    text-align: center;
    margin-top: 90px;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.5s ease, opacity 1s ease;
}

在 queries.scss 上：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    h1 {
        font-size: 1rem;
    }
}

如果我在 queries.scss 上使用 !important 声明，它们最终会起作用，但我确信这不是解决问题的最佳方法。

非常感谢您的帮助！

【问题讨论】：

标签： css responsive-design css-selectors media-queries

【解决方案1】：

媒体查询中的选择器需要至少具有相同的特异性才能覆盖前面的 CSS，所以它需要是

.hero h1 { ... }

【讨论】：

【解决方案2】：

在 css 属性后尝试 !important 关键字

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

h1 {
    font-size: 1rem !important;
}

【讨论】：