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

CSS未应用媒体查询

media-queries css-selectors responsive-design css

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 年前

Johannes 7 年前

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

.hero h1 { ... }

-2

khalil et-tkhyly 7 年前

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

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

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

推荐文章

Faizal Hussain · 如何在横向视图上处理媒体查询

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

CDNthe2nd · HTML、CSS和媒体查询-在Chrome和firefox上调整大小是不同的

7 年前

Nathan Perigreth · 如何确定用于媒体查询的确切值?

7 年前

Gabriel Morais · CSS未应用媒体查询

7 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

7 年前

DarkFenix · 为什么@custom media不在sass中应用相应的样式

7 年前

Bariq Dharmawan · 基于mobile first创建网格时出现问题

7 年前

Dtrx · 媒体查询在我的情况下不起作用

7 年前

devesh kumawat Dakshesh Khatri · 如何仅获取特定专辑的歌曲

7 年前