前端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 响应式布局：核心区别