文本未使用@media 规则调整大小

Question

Hlo 我是 Whosebug 的新手。在我的网站上，当我试图让它响应@media 规则时，它的大小没有改变。但是颜色等其他属性对我来说适用于 media rule 。谁能帮我解决这个问题？

CSS 代码

@media (orientation: portrait) { 
  h2{
    font-size : 10px;
  }
 }

HTML 代码

  <h2 style="padding-top: 300px;font-size:70px;" class="text-center"><u>MERRY CHRISTMAS</u></h2>

Answer 1

这是由于内联 css 内联 css 将具有最高优先级。如果您在 <style> 标记或不同的 css 文件中定义内联 css 规则，它将起作用。

h2{
  font-size:70px
}
@media (orientation: portrait) {
  h2{
    font-size : 10px;
  }
 }

<h2>Merry Christmas</h2>

否则，如果您想保持内联 css，只需添加 !important，如下所示。

@media (orientation: portrait) {
  h2{
    font-size : 10px!important;
  }
 }

这通常不是一个好的做法

Text not resizing with @media rule