我的媒体查询没有按预期工作
My media queries are not working as expected
这是我正在处理的网页的标记:
<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 的媒体查询在网页上不起作用。
Normal specificity rules apply.
内联样式比媒体查询中的规则集具有更高的特异性,因此它覆盖您想要的值。
将样式属性中的值移动到样式表中。
以下是隔离此问题以进行修复的几种方法:
首先去掉你所有的内联样式,把它们放在外部样式中-sheet。您将很难让媒体查询覆盖内联样式。
其次,仔细检查您的元视口是否在您的文档头部正确定义。
第三,确保与应用程序其他地方定义的这些选择器和样式没有冲突。 ie. 如果您在其他地方使用选择器定义 margin-top:
,则在您的媒体查询中使用 margin-bottom:
;诸如此类的东西 (确保您与 css 属性一致并且不会造成冲突)。
第四,确保你的CSS有效并且没有语法错误。此外,尝试将样式 sheet 中 CSS 选择器的顺序与它们在 HTML.
中的显示方式相匹配
最后的手段是使用 !important;
或包含在单独的第二个媒体查询实例中;或者重新排列这些选择器在样式 sheet 中被调用的位置。 这些可能会奏效,但最终会解决一些冲突。
这是我正在处理的网页的标记:
<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 的媒体查询在网页上不起作用。
Normal specificity rules apply.
内联样式比媒体查询中的规则集具有更高的特异性,因此它覆盖您想要的值。
将样式属性中的值移动到样式表中。
以下是隔离此问题以进行修复的几种方法:
首先去掉你所有的内联样式,把它们放在外部样式中-sheet。您将很难让媒体查询覆盖内联样式。
其次,仔细检查您的元视口是否在您的文档头部正确定义。
第三,确保与应用程序其他地方定义的这些选择器和样式没有冲突。 ie. 如果您在其他地方使用选择器定义
margin-top:
,则在您的媒体查询中使用margin-bottom:
;诸如此类的东西 (确保您与 css 属性一致并且不会造成冲突)。第四,确保你的CSS有效并且没有语法错误。此外,尝试将样式 sheet 中 CSS 选择器的顺序与它们在 HTML.
中的显示方式相匹配
最后的手段是使用
!important;
或包含在单独的第二个媒体查询实例中;或者重新排列这些选择器在样式 sheet 中被调用的位置。 这些可能会奏效,但最终会解决一些冲突。