一、响应式布局基础

响应式布局核心理念是"一次设计，多端适配"。通过CSS技术实现网页布局随视口大小自动调整，为用户提供一致的浏览体验。

1.1 视口单位

视口单位是相对于浏览器视口尺寸计算：

 /* 视口宽度单位：1vw = 1%视口宽度 */
 width: 50vw;  /* 元素宽度为视口的一半 */
 ​
 /* 视口高度单位：1vh = 1%视口高度 */
 height: 100vh;  /* 全屏高度 */
 ​
 /* vmin：取视口宽高中较小的那个 - 适合横屏适配 */
 width: 50vmin;
 /* vmax：取视口宽高中较大的那个*/
 width: 50vmax;

在PC端，100vw包含了垂直滚动条的宽度。

1.2 容器类型

 .container {        /* 有最大宽度限制，居中显示 */
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 15px;
 }
 ​
 .container-fluid {  /* 通栏，宽度100% */
     width: 100%;
 }

---

二、媒体查询（Media Query）

媒体查询允许根据设备特性应用不同的样式规则。

2.1 基本语法

 @media 媒体类型 and (媒体特征) {
     /* 满足条件时应用的样式 */
 }

2.2 媒体类型

类型	说明
screen	屏幕设备（计算机、手机、平板）
print	打印预览模式
all	所有设备

2.3 媒体特征

特征	说明
min-width	最小视口宽度
max-width	最大视口宽度
orientation	设备方向（portrait/landscape）

2.4 响应式断点设计

 /* 超小设备（手机） */
 @media screen and (max-width: 575px) { }
 ​
 /* 小设备（平板竖屏） */
 @media screen and (min-width: 576px) { }
 ​
 /* 中等设备（平板横屏） */
 @media screen and (min-width: 768px) { }
 ​
 /* 大设备（桌面显示器） */
 @media screen and (min-width: 992px) { }
 ​
 /* 超大设备 */
 @media screen and (min-width: 1200px) { }

三、Grid网格布局的响应式特性

3.1 自动填充

Grid的自动填充功能可以完全不依赖媒体查询实现响应式布局：

 /* auto-fill：保留空白空间 */
 grid-template-columns: repeat(auto-fill, 200px);
 ​
 /* auto-fit：拉伸填满容器 */
 grid-template-columns: repeat(auto-fit, 200px);

两者区别：当容器空间大于所有子元素总宽度时，auto-fill保留空白列位置，auto-fit将子元素拉伸填满容器。

3.2minmax()函数

 /* 最小200px，最大平分空间，不够自动换行 */
 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 ​
 /* 完整响应式示例 */
 .products {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 20px;
 }

当视口宽度变窄时，元素自动换行；当视口变宽时，元素自动拉伸填满空间。

---

四、REM单位与移动端适配

REM是一个相对单位，相对于HTML根元素的字体大小：

 html {
     font-size: 16px;  /* 1rem = 16px */
 }
 ​
 .container {
     width: 10rem;  /* 10 * 16px = 160px */
 }

---

五、Bootstrap栅格系统

5.1 原理

• 容器（container）：版心容器

• 行（row）：必须作为列的父元素

• 列（col）：一共12列

 <div class="container">
     <div class="row">
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">1</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">2</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">3</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">4</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">5</div>
         <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">6</div>
     </div>
 </div>

5.2 响应式断点对应

类名	屏幕宽度
.col-sm-	≥576px
.col-md-	≥768px
.col-lg-	≥992px
.col-xl-	≥1200px

---

六、案例：响应式商品列表

6.1 Flex方案

 .product-list {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }
 ​
 .product-item {
     flex: 0 0 calc(50% - 10px);
 }
 ​
 @media screen and (min-width: 768px) {
     .product-item {
         flex: 0 0 calc(33.33% - 14px);
     }
 }

6.2 Grid方案（推荐）

 .product-list {
     display: grid;
     /* 核心响应式代码，无需媒体查询 */
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 20px;
 }