加 font-size 没反应是因为 svg 标签不响应 font-size，仅字体图标（如 font awesome）或伪元素 content 中的 unicode 字符才受其控制；需确保 font-family 正确、无 font-size: 0 或 transform 覆盖，并用 em/rem 实现响应式缩放。
媒体查询里改图标大小，为什么加了 font-size 没反应？
常见错误是直接对 SVG 元素或伪元素设置 font-size，但实际生效的前提是：图标必须通过字体（如 Font Awesome 的 fa-icon 类）或 ::before/::after 用 content 插入 Unicode 字符来渲染。纯 <svg></svg> 标签不受 font-size 控制。
- 用字体图标时，确保父容器或图标本身有
font-family指向对应图标字体（如font-family: "Font Awesome 6 Free";） - 检查是否意外设置了
font-size: 0或transform: scale()覆盖了尺寸变化 - 响应式缩放优先用
em或rem单位，避免固定px值锁死缩放能力
侧边工具栏在小屏下收起，怎么让图标尺寸也同步缩小？
不能只靠媒体查询单独调图标大小，得和布局状态联动。比如工具栏从垂直展开变为水平折叠时，图标应从 24px 缩到 18px，同时间距压缩——这需要把图标尺寸定义在状态类里，而不是孤立的断点中。
- 给工具栏加状态类：
toolbar--collapsed（小屏折叠）和toolbar--expanded（大屏展开） - 图标样式写成：
.toolbar--collapsed .toolbar-icon { font-size: 1.125rem; }，再配合媒体查询激活该类 - 避免在多个断点里重复写
font-size，统一用 css 自定义属性控制：--icon-size: 1.5rem;，然后在不同状态下重设该变量
@media 查询里用 max-width 还是 min-width？
取决于你设计的“默认态”。如果桌面端是主场景，工具栏默认展开、图标较大，那就用 @media (max-width: 768px) 来覆盖小屏逻辑；反之，如果移动端优先，就用 @media (min-width: 769px) 加大屏增强。
- 推荐移动优先：先写基础样式（小屏），再用
min-width逐步增强，更利于维护 - 断点值别硬编码，提取为 CSS 变量：
:root { --breakpoint-md: 768px; }，然后写@media (min-width: var(--breakpoint-md)) - 注意设备像素比影响：某些 ipad 在横屏时报告的
width和 CSS 像素不一致，可加and (-webkit-min-device-pixel-ratio: 2)辅助判断（仅必要时）
图标变小后点击热区不够，怎么补救？
视觉尺寸缩小，但触摸/点击区域不能跟着缩。ios safari 默认最小点击热区是 44×44px，android 推荐 ≥48×48dp——光调 font-size 不够，得靠 padding 或 min-width/min-height 扩展可点击范围。
立即学习“前端免费学习笔记（深入）”；
- 给图标外层包裹元素加
padding: 0.5rem;，并设box-sizing: border-box; - 用
aspect-ratio: 1;配合min-block-size: 2.5rem;确保热区正方且足够大 - 避免用
transform: scale(0.8)缩放图标，它会连带压缩热区；改用font-size+padding组合
CSS 响应式侧边栏的图标尺寸不是独立问题，它和布局状态、交互热区、字体加载时机都咬合在一起。最容易被忽略的是：图标变小后，没同步调整父容器的 padding 和 gap，导致小屏下按钮挤在一起，手指点不准。