代码之家 › 专栏 › 技术社区 › Gabriel Morais

CSS未应用媒体查询

media-queries css-selectors responsive-design css

0

Gabriel Morais · 技术社区 · 7 年前

我当前遇到以下问题:

Default CSS overwriting Media Query

我使用了两个由GULP SASS处理的CSS文件,我在HTML的开头声明了它们,如下所示:

HTML Head

代码非常简单,我这样做只是为了测试:

关于样式。SCS:

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;
}

和查询。SCS:

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

如果我使用!关于查询的重要声明。SCS最终会起作用,但我相信这不是解决问题的最佳方式。

非常感谢您的帮助!

2 回复 | 直到 7 年前

1

2

Johannes 7 年前

媒体查询中的选择器需要至少具有相同的 特殊性 为了覆盖前面的CSS,因此需要

.hero h1 { ... }

2

-2

khalil et-tkhyly 7 年前

尝试css属性后的重要关键字

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

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