本文详解如何通过正确书写 CSS 媒体查询，在屏幕宽度小于 375px 时移除 元素的 border-radius，重点强调样式顺序对层叠优先级的影响，并提供可直接复用的代码方案。
本文详解如何通过正确书写 css 媒体查询，在屏幕宽度小于 375px 时移除 `` 元素的 `border-radius`，重点强调样式顺序对层叠优先级的影响，并提供可直接复用的代码方案。
在响应式开发中，媒体查询（Media Queries）是实现不同屏幕尺寸下差异化样式的标准手段。但一个常见误区是：媒体查询本身不提升选择器优先级，它只控制样式的生效条件；真正决定最终渲染效果的是 CSS 层叠（Cascading）规则——尤其是声明顺序。
你遇到的问题（小屏下 border-radius: 0 未生效）根本原因在于：媒体查询规则写在了基础样式之前，导致后续的基础样式（border-radius: 25px）覆盖了媒体查询中的重置声明。
✅ 正确写法必须保证媒体查询 位于基础样式之后：
/* 1. 基础样式（大/中屏默认效果）*/
img {
width: 100%;
border-radius: 25px;
}
/* 2. 响应式覆盖（小屏强制移除圆角）——必须放在此处！*/
@media screen and (max-width: 375px) {
img {
border-radius: 0;
}
}
这样，当视口宽度 ≤ 375px 时，浏览器会先应用 border-radius: 25px，再被后续同优先级、同选择器的 border-radius: 0 覆盖，从而达成预期效果。
⚠️ 注意事项：
- 不要依赖
!important解决此类问题——它掩盖了层叠逻辑缺陷，降低可维护性； - 若
img位于figure img），请确保媒体查询中的选择器权重与之匹配（例如也写作figure img）； - 推荐使用
rem或em配合根字体大小做断点，提升可访问性（如max-width: 23.4375rem≈ 375px，当html { font-size: 16px; }）； - 可通过浏览器开发者工具的「Styles」面板实时验证：勾选/取消媒体查询断点，观察
border-radius属性是否被划掉（strikethrough），快速定位覆盖关系。
总结：媒体查询不是“更高优先级的 CSS”，而是“有条件生效的普通 CSS”。掌握层叠顺序（source order）、选择器特异性（specificity）和继承机制，才是精准控制响应式样式的底层能力。
