前端移动端适配与 Bootstrap

一、移动端适配核心技巧

1.1 视口（viewport）设置

移动端适配的第一步是正确配置视口，让页面宽度适配设备屏幕，避免出现缩放异常。核心代码如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width：让页面宽度等于设备屏幕宽度；
• initial-scale=1.0：初始缩放比例为 1，保证页面无默认缩放。

所有移动端页面都需要在<head>中添加这行代码，这是适配的基础。

1.2 媒体查询

媒体查询是响应式布局的核心，能根据不同屏幕尺寸执行不同的 CSS 样式，实现 "不同设备显示不同效果"。

/* 屏幕宽度≥1200px时，背景为绿色 */
@media screen and (min-width: 1200px) {
  body {
    background-color: #22ad73;
  }
}
/* 屏幕宽度在768px~1200px之间时，背景为橙色 */
@media screen and (max-width: 1200px) and (min-width: 768px) {
  body {
    background-color: #df9322;
  }
}
/* 屏幕宽度≤768px（移动端）时，背景为红色 */
@media screen and (max-width: 768px) {
  body {
    background-color: #e23a3a;
  }
}

核心逻辑

• screen：指定针对屏幕设备；
• min-width/max-width：设置屏幕宽度的临界值；
• 多条件用and连接，实现区间匹配。

1.3 VW 单位适配

VW（Viewport Width）是相对视口宽度的单位，1vw = 视口宽度的1%。

/* 元素宽高为视口宽度的28.2667%，在任意移动端屏幕下比例一致 */
.box {
  width: 28.2667vw;
  height: 28.2667vw;
  background-color: pink;
}

优势

• 无需手动适配不同屏幕，浏览器自动计算；
• 适合固定比例的元素（如图标、圆形按钮）。

1.4 REM 单位适配

REM 是相对根元素（<html>）字体大小的单位，结合flexible.js可实现 "动态适配"（不同屏幕下<html>字体大小自动调整）。

实战步骤

1. 引入 flexible.js（阿里开源的适配库）：

<script src="./js/flexible.js"></script>

1. 使用 REM 编写样式：

/* 元素宽高基于根元素字体大小，flexible.js会自动调整根字体大小 */
.box {
  width: 2.8267rem; 
  height: 2.8267rem;
  background-color: pink;
}

核心原理

flexible.js会根据设备屏幕宽度，动态设置<html>的font-size（通常以 750px 设计稿为基准，1rem=100px），实现 "一套样式适配所有屏幕"。

1.5 响应式布局实战：仿京东多行弹性布局

结合flex弹性布局 + 媒体查询，实现京东风格的 "不同屏幕下一行显示不同数量的商品" 效果：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.box {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  width: 80%;
  max-width: 1780px; /* 最大宽度限制 */
  min-width: 1252px; /* 最小宽度限制 */
  margin: 0 auto;
}
.box .item {
  height: 120px;
  background-color: pink;
  margin: 0 8px 16px;
  /* 基础：一行6个 */
  min-width: calc(16.6666667% - 16px);
  max-width: calc(16.6666667% - 16px);
}

/* 屏幕≤1536px且≥1316px：一行5个 */
@media screen and (max-width: 1536px) and (min-width: 1316px) {
  .box .item {
    min-width: calc(20% - 16px);
    max-width: calc(20% - 16px);
  }
}
/* 屏幕≤1316px：一行4个 */
@media screen and (max-width: 1316px) {
  .box .item {
    min-width: calc(25% - 16px);
    max-width: calc(25% - 16px);
  }
}

核心要点

• flex-wrap: wrap：让弹性元素超出容器时自动换行；
• calc()计算宽度：扣除 margin 后，保证元素占比准确；
• 媒体查询动态调整min/max-width：控制每行显示的元素数量。

二、Bootstrap

Bootstrap 提供了丰富的响应式组件和布局系统，能极大提升开发效率。

2.1 Bootstrap 引入与基础配置

引入方式（本地引入）

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="./bootstrap/bootstrap.min.css">
<!-- 引入Bootstrap的JS文件（依赖jQuery/Popper，可按需引入） -->
<script src="./bootstrap/bootstrap.min.js"></script>

也可使用 CDN 引入，无需本地文件：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

2.2 Bootstrap 布局系统：容器 + 行 + 列

Bootstrap 采用 12 列栅格系统，核心结构为「容器（container）→ 行（row）→ 列（col）」，实现响应式布局。

基础示例

<!-- 固定宽度容器（不同屏幕下宽度自适应） -->
<div class="container">
  <!-- 行：列的容器 -->
  <div class="row">
    <!-- 列：不同屏幕下占比不同 -->
    <div class="item col-xl-2 col-lg-3 col-md-4 col-sm-6">1</div>
    <div class="item col-xl-2 col-lg-3 col-md-4 col-sm-6">2</div>
    <div class="item col-xl-2 col-lg-3 col-md-4 col-sm-6">3</div>
  </div>
</div>
<!-- 全屏宽度容器 -->
<div class="container-fluid">
  <!-- 内容 -->
</div>

栅格类说明

类名	屏幕宽度	说明
col-sm-*	≥576px	小屏幕（手机横屏）
col-md-*	≥768px	中等屏幕（平板）
col-lg-*	≥992px	大屏幕（电脑）
col-xl-*	≥1200px	超大屏幕

列的对齐与分布

<!-- 行内元素垂直居中+水平两端对齐 -->
<div class="container box text-center">
  <div class="row align-items-center justify-content-between">
    <div class="item col-xl-2">1</div>
    <div class="item col-xl-2">2</div>
  </div>
</div>

• align-items-center：列垂直居中；
• justify-content-between：列水平两端对齐；
• text-center：文本居中。

2.3 Bootstrap 常用组件实战

Bootstrap 封装了大量常用组件，直接调用类名即可使用，无需重复造轮子。

1. 导航栏

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

2. 表格

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
  </tbody>
</table>

• table-striped：斑马纹表格；
• table-hover： hover 高亮。

3. 折叠面板

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
        重要通知1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
      <div class="accordion-body">通知内容...</div>
    </div>
  </div>
</div>

4. 轮播图

<div id="carouselExample" class="carousel slide">
  <div class="carousel-inner">
    <div class="carousel-item active"> <!-- active表示默认显示 -->
      <img src="./img/banner1.jpg" class="d-block w-100" alt="轮播图1">
    </div>
    <div class="carousel-item">
      <img src="./img/banner2.jpg" class="d-block w-100" alt="轮播图2">
    </div>
  </div>
  <!-- 上一张/下一张按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
  </button>
</div>

5. 按钮

<!-- 基础按钮 -->
<button type="button" class="btn btn-warning">请确认收到</button>
<!-- 带图标的按钮（结合字体图标） -->
<button type="button" class="btn btn-success">
  <i class="bi bi-wifi"></i> 连WiFi
</button>
<!-- 复选框按钮组 -->
<div class="btn-group" role="group">
  <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
  <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
</div>

2.4 Bootstrap 字体图标使用

Bootstrap 5 + 推荐使用bootstrap-icons字体图标，引入后直接调用类名即可：

步骤 1：引入图标库

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

步骤 2：使用图标

<!-- 单个图标 -->
<i class="bi bi-wifi" style="font-size: 100px; color: red;"></i>
<!-- 按钮内嵌套图标 -->
<button type="button" class="btn btn-success">
  <i class="bi bi-check-circle"></i> 成功
</button>

三、总结

• 移动端适配：优先选择 VW（简单）或 REM（灵活），配合媒体查询和弹性布局，可满足大部分场景
• Bootstrap：掌握 "容器 - 行 - 列" 的 12 栅格系统，灵活调用组件类名，能快速实现响应式