CSS不应用媒体查询

Question

我目前遇到以下问题：

Default CSS overwriting Media Query

我正在使用GULP SASS正在处理的两个CSS文件，我已经在HTML的头部声明了这些文件：

HTML Head

代码非常简单，我做到了这一点，所以我可以测试一下：

在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声明它们最终会起作用，但我确定这不是解决问题的最佳方法。

非常感谢您的帮助！

Answer 1

媒体查询中的选择器需要至少具有相同的特定才能覆盖前面的CSS，因此需要

.hero h1 { ... }

Answer 2

在css属性之后尝试！important关键字

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

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