一，引言

响应式网页就是一套代码适配多个屏幕，实现方法：

媒体查询：

@media(条件){
    html{
        background-color: green;
    }
}

Bootstrap 框架

针对媒体查询的写法，我们只需要了解即可，主流的都是通过类似于 Bootstrap 框架来实现响应式网页的。

二，媒体查询

2.1 媒体特性

之前的写法：检测视口宽度等于 320px 才使用指定 css

@media(width:320px){
    html {
		background-color: green;
    }
}

实际上我们这个条件不应该是具体的某一个值，而是应该是一个区间。

区间写法： 视口最大宽度小于 320px

@media(max-width:320px){
    html{
        background-color:green;
    }
}

媒体特性：

max-width：最大宽度
min-width：最小宽度

2.2 媒体查询的书写顺序

之所以需要按照顺序写是因为，如果不按照顺序写，根据 CSS 的层叠特性，后面的会把前面的效果覆盖掉！。

2.3 媒体查询的完整写法(了解)

@media 关键词 媒体类型 and (媒体特性){
    CSS代码
}

关键词 / 逻辑操作符：

and
only
not

媒体类型：用来区分设备类型的，例如屏幕，打印机，其中手机电脑都属于屏幕

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包含以上情况

媒体特性：主要用来描述媒体类型的具体特征，例如当前屏幕的宽高，分辨率，横批或竖屏等

特性名称	属性	值
视口的宽和高	width，height	数字
视口最大宽或高	max-width、max-height	数字
视口最小宽或高	min-width、min-height	数字
屏幕方向	orientation	portrait：竖屏 landscape：横屏

2.4 媒体查询，外部CSS

我们可以通过根据媒体查询的类型直接引入外部 CSS，而不是将所有的 CSS 代码写入到一个媒体查询中。

完整写法：

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css"/>

简化写法

<link rel="stylesheet" media="(媒体特性)" href="xx.css"/>

() 不能省略！

三，Bootstrap

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，他提供了大量编写好的 CSS 样式，允许开者结合一定 HTML 结构以及 JavaScript，快速编写功能完善的网页以及常见的交互效果

中文网：https://www.bootcss.com/

3.1 快速入门

下载 Bootstrap 生产文件下载 Bootstrap · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)
找到里面的 css 文件夹中的
bootstrap.css 未经压缩的 css 文件
bootstrap.min.css 将代码全部压缩好的 css 文件
将文件放入到项目目录

在项目中引入两个文件任意一个

<link rel="stylesheet" href="./css/bootstrap.min.css">

调用类名：container：响应式布局版心
```
<div class="container">
    测试
</div>
```

3.2 栅格系统

栅格化是将整个网页的宽度分成12 等份，每个盒子占用对应的份数。

例如：一行排 4 个盒子，则每个盒子占3 份即可（12/4=3）

栅格系统的响应式区间

BreakPoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	>=576px
Medium	md	>=768px
Large	lg	>=992px
Extra large	xl	>=1200px
Extra extra large	xxl	>=1400px

栅格系统不同视口大小用的类前缀

	xs <576px	sm >=576px	md >=768px	lg >=992px	xl >=1200px	xxl >=1400px
Container(max-width)	Nonde(auto)	540px	720px	960px	1140px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xml-	.col-xxl-

常用布局类：

col-*-*：列，例如：(col-xxl-3)：代表在>=1200的屏幕里面容器占3个格子
row：行，先有行，然后里面嵌套列元素，让row的子集成为flex布局

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <!-- 视口宽度大于等于1200px，一行排4个盒子 -->
    <!-- 视口宽度大于等于768px，一行排2个盒子 -->
    <!-- 视口宽度大于等于576px，一行排1个盒子 -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">2</div>
            <div class="col-xl-3 col-md-6 col-sm-12">3</div>
            <div class="col-xl-3 col-md-6 col-sm-12">4</div>
        </div>
    </div>
</body>
</html>

3.3 全局样式

只展示全局样式如何使用，具体的可以去查看官方文档。

3.3.1 按钮

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
    <a class="btn btn-success btn-sm">按钮1</a>
    <button class="btn btn-info btn-sm">按钮2</button>
    <input type="button" class="btn btn-warning btn-sm" value="按钮3"/>
</body>
</html>

3.3.2 表格

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>

    <table class="table table-striped table-hover">
        <tr class="table-success">
            <th>name</th>
            <th>age</th>
            <th>gender</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>32</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>21</td>
            <td>女</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>12</td>
            <td>男</td>
        </tr>
    </table>


</body>
</html>

3.4 组件

组件就是 Boostrap 写好的例如下拉框的代码，我们直接复制这些代码然后修改成我们需要的。

用法为：

引入css文件
引入js文件
复制结构，修改内容

具体直接看官方文档即可，这个部分不需要详细说明。

Bootstrap 入门 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com)

3.5 字体图标

下载

Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库 (bootcss.com)
使用：
1. 复制 fonts 文件夹到项目目录
2. 网页引入bootstrap-icons.css文件
3. 调用 CSS 类名 (图标对应的类名)
```
<i class="bi bi-android2"></i>
```