CSS媒体查询失效：小屏设备无法将字体增大至70px

你的媒体查询语法存在错误，这是导致规则不生效的直接原因：and关键字和后面的括号之间必须添加空格，正确写法是and (max-width: 576px)，而非and(max-width: 576px)。

修正后的完整CSS代码如下：

/*main title style*/
.title {
    font-size: 44px;
    font-weight: 700;
}

/*media query title styling*/
@media screen and (max-width: 576px) {
    .title {
        font-size: 70px;
        /* 如果Bootstrap默认样式优先级更高，可临时添加!important覆盖 */
        /* font-size: 70px !important; */
    }
}

额外排查建议：

• 确保你的自定义CSS文件在Bootstrap样式文件之后引入，这样自定义规则才能优先生效
• 如果修正语法后仍不生效，打开浏览器开发者工具（F12）的「元素」面板，查看.title元素的字体大小是否被其他样式覆盖。此时可以通过提高选择器优先级（比如使用h1.title代替.title），或者在必要时添加!important来强制覆盖。

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