媒体查询失效的原因：@media(max-width:900px) 之后存在相同优先级的规则

原本应在手机端通过 @media 恢复为单列的价格栏，在缩窄宽度后文字却逐字纵向断裂。原因是 CSS 中与 @media 块相同优先级的声明写在了 @media 块之后，导致"后者优先"规则使 @media 内的声明被整体覆盖。只需将 @media 移至 <style> 末尾即可修复——本文记录了这一实际案例。

结论

当 CSS 优先级（详细度）相同时，写在 @media 内部还是外部不影响优先顺序。源代码中位置靠后的声明直接获胜。 实际遇到的场景是：价格区域的标题标签组件按"PC 端两列、手机端一列"排列，手机端的单列声明写在 @media (max-width: 900px) 内部，但具有相同选择器、相同优先级的基础规则（两列声明）位于文件更靠后的位置，导致即便在手机的窄屏上也以两列方式渲染——标题文字被挤进窄列后逐字纵向折断、错位。修复方法仅需将 @media 块移动到 <style> 末尾（所有基础规则之后），CSS 的值本身一个字也没有改动。

正文

详细步骤说明、验证方法及常见问题，均汇总在原文中。

→ 媒体查询失效的原因：@media(max-width:900px) 之后存在相同优先级的规则｜Rebounder Tech Blog