📚前端面试题速记
Q39

流式布局一般怎么做?

速记答案(30 秒)

宽度用百分比/vw,随着屏幕变化自动伸缩。搭配 max-width/min-width 控制极端情况。再配合媒体查询 @media 做断点优化。

📖 详细讲解

标准面试回答(推荐记住)

流式布局的核心是让元素宽度随屏幕自适应。宽度使用百分比或 vw 而不是固定的 px,这样元素会随着屏幕变化自动伸缩。为了避免极端情况,通常会设置 max-width 和 min-width 限制最大最小宽度。图片也要设置 max-width: 100% 防止溢出。配合媒体查询 @media 可以在不同断点调整布局,比如移动端一列、平板两列、桌面三列。

面试要点

  • 宽度用百分比或 vw
  • 设置 max-width/min-width
  • 配合媒体查询 @media