前端css 的固定布局,流式布局,弹性布局,自适应布局,响应式布局
1. 固定布局
容器的宽高是固定的，单位一般是px，不会随着屏幕大小变化
2.流式布局（百分比布局/vw）
vw: 视图宽度的百分比,1vw代表视窗宽度的1%
vh: 视图高度的百分比,1vh代表视窗高度的1%
特点:
- 宽度随屏幕大小变化
- 单位用%或vw
- 高度通常不随内容变化
缺点:
- 浏览器字体无法随着变化
3. 弹性布局
使用display: felx,通过弹性容器控制子元素在主轴/交叉轴上的位置和大小
特点:
- 灵活高效，简化多列布局
- 对齐和居中简单
- 响应式能力强
4.自适应布局
针对多个设备设计不同的固定宽度布局,通常通过媒体查询切换布局
特点:
根据屏幕大小切换不同的固定布局
一般设计几个断点（如 320px、768px、1024px）
5.响应式布局
结合 流式布局 + 媒体查询 + 弹性布局等方式，实现单套代码适配所有设备。
特点:
页面随屏幕自动适配
常配合 flex/grid + 媒体查询 + %/vw 等单位使用
优点:
一套代码适配所有设备（PC、Pad、手机）
缺点:
开发初期复杂，调试工作量大
方案: 媒体查询（Media Query）+ 百分比/弹性布局
这是最经典的方式，主要用于多设备断点适配（PC、平板、手机）
/* PC端布局 */
@media screen and (min-width: 1024px) {
.container { width: 80%; }
}/* 平板布局 */
@media screen and (max-width: 1023px) and (min-width: 768px) {
.container { width: 90%; flex-direction: column; }
}/* 手机布局 */
@media screen and (max-width: 767px) {
.container { width: 100%; flex-direction: column; padding: 1rem; }
}
方案 2：rem + viewport（vw）+ flex 自适应方案（移动端适配）
移动端最主流方案之一，阿里、京东、淘宝、小程序后台等都用过。
// 设置根字体大小：375px 屏幕设置为 37.5px
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';.container {
width: 7.5rem; /* 相当于 375px */
padding: 0.5rem;
display: flex;
}
自适应布局 vs 响应式布局：核心区别
| 对比项 | 自适应布局（Adaptive） | 响应式布局（Responsive） |
|---|---|---|
| 📐 布局策略 | 设置多个断点，加载时匹配一个布局 | 基于屏幕宽度流式变化，页面结构自动调整 |
| 🔁 是否需刷新页面 | ✅ 是（首次加载就匹配一个布局，不动态变化） | ❌ 否（实时响应页面宽度变化，自动调整） |
| 🧱 断点数量 | 限定几个（如手机、平板、桌面） | 可以是连续的，或者结合媒体查询做到细腻控制 |
| 🧠 原理 | 检测设备类型 / 屏幕宽度，选择不同的“固定布局” | 使用 %、vw、flex、媒体查询动态适配 |
| 📦 常用技术 | JS判断 + 不同的 layout 或媒体查询 | CSS媒体查询 + 流式单位 + 弹性/Grid布局等 |
| 💡 举例 | 加载时选择 320px、768px、1024px 三套布局之一 | 页面宽度从 300px 到 1600px 都能流畅变化 |