前端八股CSS（1）---响应式布局的方法

一、核心概念
二、6种实现方式总览
三、详细解析
[1. 媒体查询（@media）------ 最基础、最常用](#1. 媒体查询（@media）—— 最基础、最常用)
[2. 百分比布局（%）------ 相对父元素宽度自适应](#2. 百分比布局（%）—— 相对父元素宽度自适应)
[3. REM / EM 布局 ------ 移动端等比例适配](#3. REM / EM 布局 —— 移动端等比例适配)
[4. vw / vh 布局 ------ 现代移动端主流](#4. vw / vh 布局 —— 现代移动端主流)
[5. Flex 布局 ------ 一维弹性布局](#5. Flex 布局 —— 一维弹性布局)
[6. Grid 布局 ------ 二维网格布局](#6. Grid 布局 —— 二维网格布局)
[四、REM vs vw 对比（面试高频）](#四、REM vs vw 对比（面试高频）)
[为什么现在都用 vw 替代 rem？](#为什么现在都用 vw 替代 rem？)
五、现代项目推荐方案
[移动端 H5 项目](#移动端 H5 项目)
[PC + 移动端响应式项目](#PC + 移动端响应式项目)
六、面试回答模板

一、核心概念

响应式布局 = 同一套代码，在不同设备（手机、平板、PC）上都能正常显示

复制代码

PC端：宽屏，多列布局
平板：中等宽度，2列布局
手机：窄屏，单列布局

二、6种实现方式总览

方法	原理	适用场景	优点	缺点
媒体查询	根据屏幕宽度切换样式	所有场景的基础	精准控制、兼容性好	需要写多套样式
百分比布局	相对父元素宽度	基础自适应	简单、自然	嵌套深时难控制
REM/EM	相对根/父元素字体大小	移动端等比例适配	等比缩放	需要JS配合
vw/vh	相对视口宽度/高度	现代移动端主流	纯CSS、无需JS	无法限制最大最小
Flex布局	一维弹性布局	大部分布局场景	灵活、简单	二维布局复杂
Grid布局	二维网格布局	复杂网格布局	强大、精准	学习成本高

三、详细解析

1. 媒体查询（@media）------ 最基础、最常用

原理：屏幕宽度达到阈值就切换样式/布局

css 复制代码

/* 默认：手机样式（移动优先） */
.container {
  display: block;
  padding: 10px;
}
.item {
  width: 100%;
  margin-bottom: 10px;
}

/* 平板：宽度 ≥ 768px */
@media (min-width: 768px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    width: calc(50% - 10px);
    margin: 5px;
  }
}

/* PC：宽度 ≥ 1200px */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .item {
    width: calc(33.33% - 10px);
  }
}

常见断点：

设备	宽度范围
手机	< 768px
平板	768px - 992px
小屏PC	992px - 1200px
大屏PC	> 1200px

2. 百分比布局（%）------ 相对父元素宽度自适应

原理：宽度、高度用相对父容器的百分比，让元素随父容器大小自适应

css 复制代码

/* 两栏布局 */
.parent {
  width: 100%;
}
.left {
  width: 30%;      /* 占父容器30% */
  float: left;
}
.right {
  width: 70%;      /* 占父容器70% */
  float: left;
}

/* 百分比嵌套问题 */
.child {
  width: 50%;      /* 相对 .parent 的 50% */
  padding: 5%;     /* 相对父容器宽度的5% */
  margin: 5%;      /* 也是相对父容器宽度 */
}

注意事项：

padding/margin 用百分比时，是相对父容器宽度
嵌套过深时，计算会变得复杂

3. REM / EM 布局 ------ 移动端等比例适配

原理：

REM 相对于 HTML 根节点字体大小
EM 相对于父元素字体大小
配合媒体查询或 JS 动态修改 font-size

css 复制代码

/* 设置根字体大小 */
html {
  font-size: 16px;  /* 基准：1rem = 16px */
}

/* 设计稿 375px，元素宽度 100px */
.box {
  width: 6.25rem;   /* 100 / 16 = 6.25rem */
}

/* 媒体查询修改根字体 */
@media (min-width: 375px) {
  html { font-size: 20px; }  /* 1rem = 20px */
}
@media (min-width: 414px) {
  html { font-size: 22px; }  /* 1rem = 22px */
}

JS 动态设置（flexible 方案）：

javascript 复制代码

// 动态设置根字体大小
function setRem() {
  const width = document.documentElement.clientWidth
  // 设计稿宽度 375px，基准 16px
  const fontSize = (width / 375) * 16
  document.documentElement.style.fontSize = fontSize + 'px'
}

window.addEventListener('resize', setRem)
setRem()

4. vw / vh 布局 ------ 现代移动端主流

原理：直接相对于屏幕视口大小

1vw = 1% 屏幕宽度
1vh = 1% 屏幕高度

css 复制代码

/* 设计稿 375px，元素宽度 100px */
/* 100 / 375 = 26.67vw */
.box {
  width: 26.67vw;
  height: 20vh;      /* 相对视口高度 */
  font-size: 4vw;    /* 字体也相对视口 */
}

/* 限制最大最小宽度 */
.container {
  width: 100vw;
  max-width: 1200px;  /* 限制最大宽度 */
  margin: 0 auto;
}

5. Flex 布局 ------ 一维弹性布局

css 复制代码

/* 自适应列表 */
.container {
  display: flex;
  flex-wrap: wrap;     /* 换行 */
  gap: 10px;
}
.item {
  flex: 1;             /* 平均分配剩余空间 */
  min-width: 200px;    /* 最小宽度，配合媒体查询 */
}

/* 响应式导航栏 */
.nav {
  display: flex;
  flex-direction: column;  /* 手机：垂直 */
}
@media (min-width: 768px) {
  .nav {
    flex-direction: row;   /* 平板+：水平 */
  }
}

6. Grid 布局 ------ 二维网格布局

css 复制代码

/* 响应式网格 */
.container {
  display: grid;
  gap: 10px;
  /* 手机：1列 */
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .container {
    /* 平板：2列 */
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .container {
    /* PC：4列 */
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 更优雅的写法：auto-fill */
.container {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* 自动填充，每个最小250px，最大占满 */
}

四、REM vs vw 对比（面试高频）

对比维度	REM	vw
原理	相对根元素字体大小	相对视口宽度
是否需要 JS	通常需要（动态设置根字体）	不需要
换算复杂度	麻烦（px → rem）	简单（px → vw）
字体大小适配	需要单独处理	自动适配
限制最大宽度	需要额外处理	需要配合 max-width
兼容性	IE9+	IE10+
现代项目选择	逐渐被淘汰	主流方案

为什么现在都用 vw 替代 rem？

javascript 复制代码

// 1. rem 需要 JS 动态计算
setRem()  // 需要写JS

// 2. rem 换算麻烦
// 设计稿 375px，元素 100px
// 100 / 16 = 6.25rem  ← 计算复杂

// 3. vw 纯 CSS，无需 JS
// 100 / 375 = 26.67vw  ← 直接写

// 4. vw 字体也会自动缩放
font-size: 4vw;  // 屏幕越大字越大

// 5. 现在 vw 兼容性已经足够
// iOS 7+、Android 4.4+ 都支持

五、现代项目推荐方案

移动端 H5 项目

css 复制代码

/* 方案1：纯 vw（推荐） */
html {
  font-size: 13.333vw;  /* 1rem = 100px（基于375设计稿） */
}
/* 配合 postcss-px-to-viewport 自动转换 */

/* 方案2：vw + 媒体查询限制最大宽度 */
.container {
  width: 100vw;
  max-width: 750px;   /* 限制最大宽度 */
  margin: 0 auto;
}

PC + 移动端响应式项目

复制代码

/* 方案：媒体查询 + Flex/Grid + vw混合 */
/* 大屏用固定宽度，小屏用百分比/vw */

css 复制代码

/* PC */
@media (min-width: 1200px) {
  .container {
    width: 1200px;
    margin: 0 auto;
  }
}

/* 平板 */
@media (max-width: 1199px) and (min-width: 768px) {
  .container {
    width: 96%;
  }
}

/* 手机 */
@media (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

六、面试回答模板

问：实现响应式布局的方法有哪些？

答：主要有6种方法：

媒体查询：根据屏幕宽度切换样式，是所有响应式的基础

百分比布局：元素宽度相对父容器，实现基础自适应

REM/EM布局：相对根/父元素字体大小，早年移动端适配主流

vw/vh布局：相对视口大小，现代移动端主流方案，无需JS

Flex布局：一维弹性布局，适合大部分场景

Grid布局：二维网格布局，适合复杂网格

现在移动端项目推荐 vw + Flex/Grid 的组合方案，PC端配合媒体查询做断点适配。