流式布局中width优先用百分比等相对单位，容器级宽度用%、vw等确保缩放，装饰性尺寸用px或rem保持一致；需避免混用单位导致断点失效。
流式布局中 width 用百分比还是 px？
响应式设计里，width 该用百分比还是固定值，取决于元素是否需要随容器缩放。流式布局（fluid layout）的核心就是用相对单位让内容“流动”起来，所以绝大多数容器级宽度应优先用 %、vw 或 ch 等相对单位；而图标、按钮内距、边框等装饰性尺寸，才适合用 px 或 rem 保证视觉一致性。
哪些地方必须用百分比（或视口单位）？
以下场景若硬写 px，会直接破坏流式行为：
-
max-width设为1200px的容器，在小屏上会横向溢出——应配合width: 100%和max-width: 100%或max-width: 80vw - 栅格列宽（如三栏布局）：用
width: 33.333%比写死400px更可靠，尤其配合box-sizing: border-box - 图片自适应：设
width: 100%+height: auto，才能随父容器缩放；仅设max-width: 100%不够，父容器若未设宽，它可能不收缩
哪些地方反而该用固定值？
固定值不是敌人，而是控制“不随容器缩放”的关键：
- 字体大小：
font-size: 16px或1rem更稳定，font-size: 1.2em在嵌套多层时容易失控 - 间距与边框：
padding: 8px、border: 1px solid #ccc用px可避免小屏下间隙过窄、边框消失 - 图标尺寸：
width: 24px比width: 2%更可控——后者在超窄屏下可能缩成一个点
常见错误：混用单位导致断点失效
比如这样写：
立即学习“前端免费学习笔记（深入）”；
.container {
width: 960px;
margin: 0 auto;
}
@media (max-width: 768px) {
.container {
width: 100%;
}
}
问题在于：桌面端写死 960px，移动端才切到 100%，中间尺寸（如 800–959px）既没适配又没断点覆盖，出现空白或溢出。更稳妥的做法是：
- 从移动优先出发，初始设
width: 100% - 在中大屏用
@media (min-width: 768px)加max-width: 960px限制 - 避免同一属性在不同媒体查询里反复切换单位类型
流式布局的难点不在“怎么写”，而在“哪些该流、哪些不该流”。漏掉一个 box-sizing: border-box，或者在 padding 里用了 % 却忘了它基于父容器宽度计算，都可能让整行布局错位。
