html - 如何修复我的媒体查询以更改文本大小？

Question

我正在尝试获取媒体查询以减小文本的大小。听起来很简单，对吧？我似乎看不到我错过了什么。

HTML:

<div class="fp-featured">
<div class="fp-title">TITLE</div>
<p class="text1 inline-edit-editable">Text 1 here<br />
<span class="text2" style="font-size: 56pt;">Text 2 here!</span></p>
</div>

CSS:

@media only screen and (max-width: 600px) {
.fp-featured > span {
font-size: 12pt;
}
}

还尝试只为跨度类拍摄

@media only screen and (max-width: 600px) {
.text2 {
font-size: 12pt;
}
}

当我缩小窗口时，没有任何变化。我不知道我是在声明类还是错误的顺序，但我就是无法缩小文本大小。

Answer 1

您已将内联 css 应用于 text2 元素，它比样式表中的常规 css 具有更高的优先级。要提高样式表 css 的优先级，请使用 !important 规则。

@media only screen and (max-width: 600px) {
.text2 {
font-size: 12pt!important;
}
}

或者您可以在样式表中设置初始文本面并从 html 中删除内联样式声明。