使用@media规则做响应式时文字大小不生效其他属性正常怎么解决

你遇到的font-size规则不生效问题是CSS优先级规则导致的：

• HTML行内样式（style属性定义的样式）的优先级远高于普通标签选择器的样式，你在h2的行内已经写死了font-size:70px，所以@media中用标签选择器h2定义的字体大小会被直接覆盖
• color属性你没有在行内设置，所以@media中的对应规则可以正常匹配生效

方案1（最推荐）：移除行内的font-size配置，统一放到CSS中管理 #

修改后的HTML代码：

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

补充后的CSS代码，增加默认状态的字体大小配置：

/* 横屏/默认状态下的样式 */
h2 {
  font-size: 70px;
}
@media (orientation: portrait) { 
  h2 {
    font-size: 10px;
  }
}

方案2（仅适合无法修改行内样式的场景）：用!important提升规则优先级 #

直接修改@media中的配置即可，不需要改动HTML：

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

注意：!important会破坏默认优先级规则，非必要不建议滥用。

内容的提问来源于stack exchange，提问作者user17400110