CSS 响应式布局是实现页面适配手机、平板、电脑等多终端屏幕的核心方案，通过 CSS 可实现 “屏幕尺寸变化，页面布局自适应调整”
视口单位（vw/vh/vmin/vmax）：适配屏幕的弹性单位
视口的定义：视口是指浏览器的可视区域（不包含浏览器的地址栏、工具栏），移动端视口需通过 设置为设备宽度（避免页面缩放）。
视口单位的分类与用法：
vw：视口宽度的 1%（如视口宽度为 1000px，1vw = 10px），适合设置元素的宽度、字体大小等，随视口宽度自适应变化。
vh：视口高度的 1%（如视口高度为 800px，1vh = 8px），适合设置元素的高度（如页面全屏布局），随视口高度自适应变化。
vmin：取 vw 和 vh 中的较小值（如视口宽 1000px、高 800px，1vmin = 8px），适合适配横竖屏切换的场景（如移动端弹窗）。
vmax：取 vw 和 vh 中的较大值（如视口宽 1000px、高 800px，1vmax = 10px），适合需要占据较大空间的元素（如全屏背景图）。
实用技巧：font-size: 5vw; 可实现文本随屏幕宽度自适应变化，width: 100vw; height: 100vh; 可实现元素全屏显示，无需依赖固定像素值。
媒体查询（@media）：断点优化与精准适配
媒体查询的核心是 “根据屏幕尺寸的断点，设置不同的 CSS 样式”，实现 “不同屏幕，不同布局”，常用的断点参考（适配主流设备）：
移动端（小屏）：max-width: 767px（手机竖屏）。
平板端（中屏）：min-width: 768px 且 max-width: 991px（平板、手机横屏）。
电脑端（大屏）：min-width: 992px 且 max-width: 1199px（普通电脑显示器）。
超大屏：min-width: 1200px（高清电脑显示器、大屏电视）。
媒体查询的书写方式：
外联式：（单独引入移动端样式）。
内嵌式：@media (max-width: 767px) { /* 移动端样式 */ }（在同一个 CSS 文件中编写不同断点样式，推荐）。
实用技巧：采用 “移动优先” 的书写原则（先编写移动端样式，再通过 min-width 编写大屏样式），减少样式的覆盖和冗余，提升代码可维护性。
流式布局与固定布局的结合：兼顾自适应与精准控制
流式布局：元素的尺寸使用百分比、vw 等弹性单位，随屏幕尺寸自适应变化（如 width: 100%;、width: 50vw;），适合适配不同屏幕尺寸，但难以精准控制元素尺寸。
固定布局：元素的尺寸使用 px 等固定单位，尺寸不随屏幕尺寸变化（如 width: 1200px;、height: 80px;），适合精准控制元素尺寸，但无法适配小屏幕。
结合方案：大屏使用固定布局（如 width: 1200px; margin: 0 auto;），保证页面的规整性；小屏使用流式布局（如 width: 100%; padding: 0 15px;），保证页面的适配性，兼顾两者的优势。
<!-- 对应CSS示例的HTML结构，可直接运行查看效果 -->
<!-- 场景1：BFC 实战应用 -->
<div class="parent-margin">
<div class="child-margin"></div>
</div>
<div class="parent-float">
<div class="child-float"></div>
</div>
<div class="float-overlap">
<div class="left-float"></div>
<div class="right-normal"></div>
</div>
<div class="bfc-layout">
<div class="left"></div>
<div class="right">右侧自适应内容</div>
</div>
<!-- 场景2：CSS 样式隔离 -->
<!-- BEM 命名规范 -->
<div class="user-card">
<div class="user-card__avatar"></div>
<div class="user-card__name">张三</div>
</div>
<div class="user-card user-card--dark">
<div class="user-card__avatar"></div>
<div class="user-card__name">李四（暗黑模式）</div>
</div>
<!-- 前缀命名规范 -->
<div class="order-list">
<div class="order-list__item">订单1：已付款</div>
<div class="order-list__item">订单2：已发货</div>
</div>
<div class="goods-card">
<div class="goods-card__title">商品标题</div>
<div class="goods-card__desc">商品描述信息</div>
</div>
<!-- BFC 模块布局隔离 -->
<div class="module-container">
<div class="module1">
<h3>模块1</h3>
<p>模块1内的内容，样式不会污染其他模块</p>
</div>
<div class="module2">
<h3>模块2</h3>
<p>模块2内的内容，样式不会污染其他模块</p>
</div>
</div>/* 重置样式，消除默认边距和盒模型问题（基础铺垫，非核心） */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/************************** 场景1：BFC 实战应用（解决常见布局难题） **************************/
/* 示例1：解决父子元素 margin 塌陷问题 */
/* 问题：子元素的 margin-top 会传递给父元素，导致父元素一起下移 */
.parent-margin {
width: 300px;
background-color: #f5f5f5;
border-radius: 8px;
/* 触发 BFC 解决 margin 塌陷：overflow: hidden;（简单快捷） */
overflow: hidden;
}
.child-margin {
width: 200px;
height: 100px;
background-color: #3498db;
border-radius: 8px;
margin: 20px auto; /* 子元素上下外边距20px */
}
/* 示例2：解决浮动塌陷问题（父元素无法包裹浮动子元素） */
/* 问题：子元素浮动后，父元素高度为 0，无法包裹子元素 */
.parent-float {
width: 300px;
background-color: #f5f5f5;
border-radius: 8px;
/* 触发 BFC 解决浮动塌陷：overflow: hidden;（简单快捷） */
overflow: hidden;
margin-top: 20px;
}
.child-float {
width: 100px;
height: 100px;
background-color: #e74c3c;
border-radius: 8px;
float: left; /* 子元素左浮动 */
margin: 20px;
}
/* 示例3：解决元素重叠问题（浮动元素与非浮动元素重叠） */
/* 问题：左侧浮动元素会与右侧非浮动元素重叠 */
.float-overlap {
width: 400px;
margin-top: 20px;
}
.left-float {
width: 150px;
height: 150px;
background-color: #f39c12;
border-radius: 8px;
float: left; /* 左侧元素左浮动 */
}
.right-normal {
width: 300px;
height: 150px;
background-color: #2ecc71;
border-radius: 8px;
/* 触发 BFC 解决重叠问题：overflow: hidden;（简单快捷） */
overflow: hidden;
}
/* 示例4：实现自适应两栏布局（左侧固定，右侧自适应） */
.bfc-layout {
width: 400px;
margin-top: 20px;
background-color: #f5f5f5;
border-radius: 8px;
}
.bfc-layout .left {
width: 150px;
height: 200px;
background-color: #3498db;
border-radius: 8px;
float: left; /* 左侧固定宽度，左浮动 */
}
.bfc-layout .right {
height: 200px;
background-color: #e74c3c;
border-radius: 8px;
/* 触发 BFC 实现自适应：overflow: hidden;（简单快捷） */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 16px;
}
/************************** 场景2：CSS 样式隔离（避免样式冲突） **************************/
/* 示例1：BEM 命名规范（Block-Element-Modifier） */
/* Block：模块名（user-card） */
.user-card {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-top: 20px;
}
/* Element：模块内的元素（user-card__avatar） */
.user-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: #3498db;
margin: 0 auto;
}
/* Element：模块内的元素（user-card__name） */
.user-card__name {
font-size: 18px;
font-weight: bold;
text-align: center;
margin-top: 15px;
color: #333;
}
/* Modifier：模块的修改器（user-card--dark） */
.user-card--dark {
background-color: #2c3e50;
color: #fff;
}
.user-card--dark .user-card__name {
color: #fff;
}
/* 示例2：前缀命名规范（不同模块添加专属前缀） */
/* 订单模块：order- 前缀 */
.order-list {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-top: 20px;
}
.order-list__item {
padding: 10px 0;
border-bottom: 1px solid #eee;
font-size: 16px;
color: #333;
}
/* 商品模块：goods- 前缀 */
.goods-card {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-top: 20px;
}
.goods-card__title {
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
/* 示例3：BFC 实现模块布局隔离 */
.module-container {
width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
/* 模块1：触发 BFC，实现布局隔离 */
.module1 {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/* 触发 BFC 实现隔离：overflow: hidden; */
overflow: hidden;
}
/* 模块2：触发 BFC，实现布局隔离 */
.module2 {
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/* 触发 BFC 实现隔离：display: flex; */
display: flex;
flex-direction: column;
}