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

【问题标题】：Text not resizing with @media rule未使用 @media 规则调整文本大小
【发布时间】：2021-11-13 10:28:07
【问题描述】：

我是 stackoverflow 的新手。在我的网站中，当我尝试使用 @media 规则使其响应时，它的大小没有改变。但是像颜色这样的其他属性对我来说适用于媒体规则。谁能帮我解决这个问题？

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>

【问题讨论】：

【解决方案1】：

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

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

&lt;h2&gt;Merry Christmas&lt;/h2&gt;

或者如果你想保持内联css，只需添加!important，如下添加。

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

这通常不是一个好习惯

【讨论】：