前端三剑客
CSS

移动端开发之响应式布局

# 移动端开发之响应式布局

响应式开发是一种设计方法，旨在通过使用媒体查询和灵活的布局，使网页在不同设备和屏幕尺寸上具有良好的用户体验。以下是关于响应式开发的详细介绍和实现示例。

# 1. 响应式开发

# 1.1 响应式开发原理

响应式开发通过使用媒体查询，根据设备的屏幕宽度应用不同的布局和样式，以适配各种设备。这种方法确保了用户在不同的设备上看到的页面都是经过优化的。

屏幕尺寸划分

设备类型	尺寸区间
超小屏幕（手机）	`w < 768px`
小屏设备（平板）	`768px <= w < 992px`
中等屏幕（桌面显示器）	`992px <= w < 1200px`
宽屏设备（大桌面显示器）	`w >= 1200px`

# 1.2 响应式布局容器

在响应式设计中，通常需要一个父级容器来作为布局的基础，这个容器可以根据屏幕尺寸的变化动态调整其大小和样式。通过媒体查询，可以在不同屏幕下改变布局容器的宽度，以及子元素的排列和大小，从而实现响应式效果。

常用的响应式尺寸划分

超小屏幕（手机，小于 768px）：容器宽度设置为 100%。
小屏幕（平板，大于等于 768px）：容器宽度设置为 750px。
中等屏幕（桌面显示器，大于等于 992px）：容器宽度设置为 970px。
大屏幕（大桌面显示器，大于等于 1200px）：容器宽度设置为 1170px。

代码实现

HTML 部分：

<!-- 布局容器 -->
<div class="container"></div>

1
2

CSS 部分：

.container {
    height: 150px;
    margin: 0 auto;
    background-color: pink;
}

/* 超小屏幕，小于 768px 时布局容器宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}

/* 小屏幕，大于等于 768px 时布局容器宽度为 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}

/* 中等屏幕，大于等于 992px 时布局容器宽度为 970px */
@media screen and (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 大屏幕，大于等于 1200px 时布局容器宽度为 1170px */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 1.3 案例：响应式导航

在这个示例中，我们将创建一个响应式导航栏，当屏幕宽度小于 800 像素时，导航栏的布局会自动调整。

当屏幕宽度大于等于 800 像素时，nav 的宽度为 800px，并且包含 8 个浮动的 li 元素，每个宽度为 100px。
当屏幕宽度小于 800 像素时，nav 的宽度变为 100%，li 元素的宽度变为 33.33%，使得每行最多显示 3 个 li。

# HTML 部分

<div class="container">
    <ul>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
        <li>导航栏</li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# CSS 部分

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.container {
    width: 750px; /* 默认宽度 */
    margin: 0 auto;
}

.container ul li {
    width: 93.75px; /* 每个导航项的宽度为 93.75px */
    height: 30px;
    background-color: green;
    float: left; /* 浮动，横向排列 */
    text-align: center;
    line-height: 30px; /* 垂直居中 */
}

/* 超小屏幕，小于 800px 时调整布局 */
@media screen and (max-width: 799px) {
    .container {
        width: 100%; /* 宽度为 100% */
    }
    .container ul li {
        width: 33.33%; /* 每行最多显示 3 个导航项 */
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

代码详解

默认样式：在大屏幕下，container 的宽度为 750px，li 元素的宽度为 93.75px，浮动排列。
媒体查询：当屏幕宽度小于 800px 时，通过媒体查询调整 container 的宽度为 100%，同时将 li 的宽度调整为 33.33%，使得一行最多显示 3 个导航项。
自适应调整：通过媒体查询和浮动布局，确保导航栏在不同设备上都有良好的用户体验。

总结

响应式开发通过媒体查询和灵活布局，实现了网页在不同设备上的适配性，提供了一种统一的设计方法。通过设置不同的断点，可以让网页在手机、平板、桌面等多种设备上都能良好地显示和交互。

Bootstrap 是一个强大而流行的前端开发框架，提供了一套完整的工具和样式库，帮助开发者快速构建现代化的网页和应用。以下是关于 Bootstrap 的详细介绍及其基本使用方法。

# 2. Bootstrap 前端开发框架

# 2.1 Bootstrap 简介

Bootstrap 是由 Twitter 开发的开源前端框架，广泛应用于 Web 开发中。它基于 HTML、CSS 和 JavaScript，提供了一系列预定义的样式和组件，使得 Web 开发更加高效和一致。

中文官网：Bootstrap 中文官网 (opens new window)
官网：Bootstrap 官网 (opens new window)

框架特点

标准化：提供了一套标准化的 HTML + CSS 编码规范。
组件丰富：内置了一系列简洁、直观、功能强大的组件。
生态完善：拥有庞大的用户社区和不断更新的版本。
高效开发：提高了开发效率，减少了重复劳动。

# 2.2 Bootstrap 使用

在不涉及 JavaScript 的情况下，我们可以只使用 Bootstrap 的样式库。以下是使用 Bootstrap 的基本步骤：

创建文件夹结构：组织项目文件，以便于管理和引用。
创建 HTML 骨架结构：构建页面的基础结构，确保兼容性和响应式。
引入相关样式文件：使用 Bootstrap 提供的 CSS 文件来应用样式。
书写内容：利用 Bootstrap 的预定义样式进行开发。

# 1. 创建文件夹结构

项目的基本文件夹结构如下：

project/
│
├── bootstrap/
│   ├── css/
│   │   └── bootstrap.min.css
│   ├── fonts/
│   └── js/
│       └── bootstrap.min.js
│
├── css/
│   └── style.css
│
├── images/
│   └── ... （所有图片资源）
│
└── index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2. HTML 骨架结构

确保页面在所有浏览器上都能正常渲染，并具有响应式布局能力。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 使用 IE 浏览器的最新渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口宽度和缩放比例，使页面在移动设备上响应良好 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <!-- 支持 IE9 以下版本浏览器对 HTML5 标签的支持 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <!-- 解决 IE9 以下版本浏览器对 CSS3 媒体查询的支持 -->
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <title>Bootstrap Example</title>
    <!-- 引入 Bootstrap 核心样式 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 3. 引入相关样式文件

在 HTML 中，通过 <link> 标签引入 Bootstrap 的核心样式文件。

<!-- Bootstrap 核心样式 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

1
2

# 4. 书写内容

直接使用：利用 Bootstrap 提供的预定义样式类。
自定义修改：在需要时修改 Bootstrap 的默认样式，注意权重问题。
学习关键：熟悉 Bootstrap 提供的样式类和效果是使用框架的关键。

# 2.3 布局容器

Bootstrap 提供了两种布局容器：.container 和 .container-fluid。这些容器用于包裹页面内容和栅格系统，并提供响应式的布局基础。

# 1. `container` 类

功能：创建一个响应式的固定宽度容器。
宽度：
- 大屏（>=1200px）：宽度为 1170px
- 中屏（>=992px）：宽度为 970px
- 小屏（>=768px）：宽度为 750px
- 超小屏（<768px）：宽度为 100%

# 2. `container-fluid` 类

功能：创建一个流式布局的百分比宽度容器。
特点：占据全部视口（viewport）的宽度。

# 3. 布局容器示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Container Example</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!-- 固定宽度的响应式容器 -->
    <div class="container">
        <h1>固定宽度容器</h1>
        <p>这是一个使用 .container 类的示例。</p>
    </div>

    <!-- 流式布局的百分比宽度容器 -->
    <div class="container-fluid">
        <h1>流式布局容器</h1>
        <p>这是一个使用 .container-fluid 类的示例。</p>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 3. Bootstrap 栅格系统

# 3.1 栅格系统简介

栅格系统英文为 “grid systems”，也有人翻译为 “网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

# 3.2 栅格选型参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。 bootstrap1

按照不同屏幕划分为 1~12 等份
行（row）可以去除父容器作用15px的边距
xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；
列（column）大于12，多余的 “列（column）”所在的元素将被作为一个整体另起一行排列
每一列默认有左右15像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class="col-md-4 col-sm-6"

例如，col-lg-3 col-md-4 col-sm-6 col-xm-12 表示随着屏幕尺寸的缩小，每一行能放的盒子变为 4、3、2、1。

<!-- 有12个，则可以占满一行 -->
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">4</div>
</div>
<!-- 有12个，则可以占满一行，不同份数表示了所占比例 -->
<div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-6">4</div>
</div>
<!-- 不足12个，则空出多余 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-2">4</div>
</div>
<!-- 超出12个，则放到下一行 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-4">4</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

以上代码布局效果如下： bootstrap2

# 3.3 列嵌套

栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <!-- 嵌套的行和列 -->
            <div class="row">
                <div class="col-md-6">第一小列</div>
                <div class="col-md-6">第二小列</div>
            </div>
        </div>
        <div class="col-md-4">第二列</div>
        <div class="col-md-4">第三列</div>
    </div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13

布局效果如下： bootstrap3

# 3.4 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 col-md-offset-4">2</div> <!-- 右偏移4列 -->
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">0</div> <!-- 右偏移2列 -->
    </div>
</div>

1
2
3
4
5
6
7
8
9

布局效果如下： bootstrap4

# 3.5 列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="container">
    <div class="row">
        <div class="col-md-4">左侧盒子</div>
        <div class="col-md-8">右侧盒子</div>
    </div>
    <div class="row">
        <!-- 左侧盒子推到右侧 -->
        <div class="col-md-4 col-md-push-8">左侧盒子</div>
        <!-- 右侧盒子拉到左侧 -->
        <div class="col-md-8 col-md-pull-4">右侧盒子</div>
    </div>
</div>