百分比侧边栏不能直接写width: 25%就完事，因为其计算依赖父容器宽度（可能不固定），叠加padding/border易超100%导致掉行，且Safari中flex-shrink会压缩侧边栏；需统一box-sizing: border-box、加calc容错、设flex-shrink: 0、用em断点及clamp()替代静态计算。
百分比侧边栏为什么不能直接写 width: 25% 就完事？
因为百分比是相对于父容器计算的，而父容器宽度本身可能不固定（比如用 max-width: 1200px + margin: 0 auto），导致小屏下侧边栏实际像素过小、文字挤成一团，大屏下又撑不满。更麻烦的是：浮动布局里，width: 25% 和 width: 75% 加上默认 border 或 padding，很容易超 100%，右栏掉行。
实操建议：
- 统一加
box-sizing: border-box，让 padding/border 不影响宽度计算 - 侧边栏和主内容都设
float: left，别一个左一个右——否则小屏媒体查询里取消 float 时容易错位 - 父容器用
overflow: hidden清除浮动，别依赖伪元素（兼容性更稳） - 宽度留 1px 容错：侧边栏用
width: calc(25% - 1px)，主内容用width: calc(75% + 1px)
@media 断点该按像素写还是按 em 写？
写 max-width: 48em 比 max-width: 768px 更可靠。因为 em 基于用户设置的字体大小，能适配系统级缩放、阅读模式等场景；而硬写像素值，在高 DPI 屏或用户调大浏览器字号时，断点会偏移——比如本该在 768px 切单栏，结果 640px 就切了，标题文字已被压缩换行。
常见错误现象：小屏下侧边栏还没隐藏，主内容区已开始堆叠，布局错乱。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 断点变量定义为
$sidebar-breakpoint: 48em，而不是768px - 媒体查询统一用
@media (max-width: $sidebar-breakpoint)，逻辑是从大到小降级 - 小屏规则里必须重置
float: none和width: 100%，同时把父容器的overflow: hidden改成visible
SCSS 变量能不能用来动态算出不同断点下的百分比？
不能。SCSS 是编译时处理，#{$sidebar-width-md / $container-width} 这种写法会报错——$container-width 在 CSS 里根本不存在，它可能是 100%、max-width: 1200px 或由 flex 自适应决定，无法被 SCSS 静态计算。
真正安全的做法，是把百分比当配置项来用，而不是“算出来”：
- 桌面端设
$sidebar-width-desktop: 25%，平板设$sidebar-width-tablet: 30%，只在对应媒体查询里引用 - 别试图用
percentage()函数转换像素值——那只是把240px / 1200px算成20%，但 1200px 不是所有设备的容器宽 - 如果真要响应式缩放，改用
clamp(180px, 25%, 280px)，让浏览器运行时决定，SCSS 只负责注入这个值
为什么你写了百分比，侧边栏在 Safari 上还是错位？
因为 Safari 对 flex-shrink: 1（默认值）特别敏感，当主内容区文字多、撑开宽度时，侧边栏会被压缩变形，哪怕你写了 width: 25%。这不是 bug，是 flex 的正常行为——它优先保证主内容不溢出。
实操建议：
- 给侧边栏显式加
flex-shrink: 0，锁死宽度不被压缩 - 主内容区用
flex: 1，而不是width: 75%——这样既保持比例感，又避免 flex 布局下 width 被忽略 - 如果用 float，记得在 Safari 下补一行
min-width: 0，防止匿名文本节点撑开容器 - 动画别碰
left或width，用transform: translateX()+will-change: transform，否则 iOS WebView 会卡顿
最易被忽略的一点：百分比方案只适合简单两栏，一旦加入头部、底部、滚动区域，就必须切到 grid 或 flex，否则 height: 100% 和 overflow 会连锁失效。
