我的媒体查询未按预期工作

时间:2017-06-02 13:04:11

标签: html css html5 media-queries responsive

这是我正在处理的网页的标记:

<section style="background-image: url(img/about-banner.jpg); height: 100vh; position: relative; background-size: cover;">
    <div class="container" style="width: 90%;">
        <div class="display-table">
            <div class="table-cell" style="vertical-align: bottom;">
                <div class="content about-header" style="margin-bottom: 20vh; margin-left: -2vw;">
                    <h1 class="text-white other-header-h1" style="font-size: 3.5vw;">Title Text</h1>
                </div>
            </div>
        </div>
    </div>
</section>

感兴趣的两个主要领域是

<div class="content about-header" style="margin-bottom: 20vh; margin-left: -2vw;"

<h1 class="text-white other-header-h1" style="font-size: 3.5vw;">Title Text

对于低于1025x的屏幕尺寸,我试图使字体大小为5vw和margin-bottom:30vh;

这些是我在responsive.css中添加的媒体查询:

@media (max-width: 1024px) {
.header_section_fix {
    font-size: 1.5vw;
}

.header_fix_links a {
    margin-right: 3%;
}

.about-header {
    margin-bottom: 30vh;
    margin-left: -2vw;
}

.other-header-h1 {
    font-size: 5vw;
} 

在上面的css中,.header_section_fix和.header_fix_links都正常工作。 但是,.about-header和.other-header-h1的媒体查询在网页上不起作用。

2 个答案:

答案 0 :(得分:0)

Normal specificity rules apply

内联样式的特异性高于媒体查询中的规则集,因此覆盖您想要的值。

将style属性中的值移动到样式表中。

答案 1 :(得分:0)

以下几种方法可以解决此问题:

  1. 首先删除所有内联样式,并将它们放在外部样式表中。您将很难获得媒体查询以覆盖内联样式。

  2. 其次,仔细检查您的元视口是否正确定义在文档的头部。

  3. 第三,确保与应用程序中其他位置定义的这些选择器和样式没有冲突。 ie。如果您在其他地方使用选择器定义margin-top:,请在媒体查询中使用margin-bottom:;这样的东西(确保你与css属性一致而不是产生冲突)。

  4. 第四,确保您的CSS有效且没有语法错误。另外,尝试将样式表中CSS选择器的顺序与它们在HTML中的显示方式相匹配。

  5. 您的最后手段场景将使用!important;或封闭在单独的第二个媒体查询实例中;或重新排列样式表中调用这些选择器的位置。 这些可能有效,但最终可以解决一些冲突。