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 響應式布局：核心區別