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中删除内联样式声明。

Answer 2

添加您的CSS，然后删除内联CSS。 Example

.text2 {
   font-size: 56pt;
 }

Answer 3

您在这里有几处错误。

当您将inline css写入span时，只能用具有css属性的!importans覆盖它。示例：font-size: 12pt!important;
.fp-featured > span仅在span的{{1}}中选择.fp-featured中的descendants个，并使用.fp-featured。

总体而言，我建议.fp-featured span内联remove并编写以下CSS

css

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

3 个答案: