Q39
★ ★ ★ ★ ★
流式布局一般怎么做?
⚡ 速记答案(30 秒)
宽度用百分比/vw,随着屏幕变化自动伸缩。搭配 max-width/min-width 控制极端情况。再配合媒体查询 @media 做断点优化。
📖 详细讲解
标准面试回答(推荐记住)
流式布局的核心是让元素宽度随屏幕自适应。宽度使用百分比或 vw 而不是固定的 px,这样元素会随着屏幕变化自动伸缩。为了避免极端情况,通常会设置 max-width 和 min-width 限制最大最小宽度。图片也要设置 max-width: 100% 防止溢出。配合媒体查询 @media 可以在不同断点调整布局,比如移动端一列、平板两列、桌面三列。
✅ 面试要点
- •宽度用百分比或 vw
- •设置 max-width/min-width
- •配合媒体查询 @media