直接设置 font-size 在媒体查询中失效，根本原因是图标类被更具体的 CSS 规则覆盖，或字体设为 inherit 但父容器无字号；应确保 display 值、检查计算值、优先设置容器字号。
为什么直接设置 font-size 在媒体查询里会失效？
常见现象是：在 @media (max-width: 768px) 中给图标元素设了 font-size: 16px，但实际没变小。根本原因往往是图标类（如 .icon-home）被更具体的 CSS 规则覆盖，或者字体本身设置了 font-size: inherit 却父容器未定义尺寸。
实操建议：
- 确保图标元素有明确的
display值（推荐inline-block或block），避免受行内布局干扰 - 用浏览器开发者工具检查计算后的
font-size，确认是否被其他规则（比如重置样式、UI 框架默认值）覆盖 - 优先对图标容器（如
）直接设置font-size，而非依赖继承
如何用 @media 分层控制图标大小？
响应式图标不是“一刀切”，而是按设备类型分档缩放。关键在于把图标尺寸和断点逻辑解耦——用 CSS 自定义属性定义基准值，再在媒体查询中修改它。
示例写法：
立即学习“前端免费学习笔记（深入）”；
:root {
--icon-size: 24px;
}
.icon {
font-family: "IconFont";
font-size: var(--icon-size);
}
@media (max-width: 768px) {
:root { --icon-size: 20px; }
}
@media (max-width: 480px) {
:root { --icon-size: 16px; }
}
这样改一处变量，所有 .icon 都同步响应，且语义清晰、便于维护。
