移动端Media Query意外控制桌面端样式问题咨询

你遇到的问题大概率是媒体查询的代码块没有正确闭合，导致带!important的样式变成全局生效，直接覆盖了桌面端的原有样式。

看你提供的移动端媒体查询代码：

@media screen and (max-width: 767px) {
     .give-donation-level-btn {
    font-size: .9rem !important;
}

这里只闭合了.give-donation-level-btn的样式块，却漏掉了@media本身的闭合大括号}。浏览器解析CSS时，遇到未闭合的代码块会忽略媒体查询的限制，直接让里面的样式全局生效，再加上!important的高优先级，自然会影响到桌面端。

修正后的代码 #

/* 桌面端样式 */
.give-donation-level-btn {
    font-size: 16px;
}

/* 移动端媒体查询 - 确保闭合完整 */
@media screen and (max-width: 767px) {
    .give-donation-level-btn {
        font-size: .9rem !important;
    }
}

其他排查方向 #

• 检查是否在CSS文件其他位置重复定义了相同的媒体查询或样式，导致规则冲突
• 打开浏览器开发者工具，在桌面端状态下查看该元素的font-size生效来源，确认是否真的被移动端样式覆盖
• 若使用了CSS预处理器（如Sass/Less），检查编译后的最终CSS是否存在语法错误

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