# 多终端响应式项目开发最佳实践

TIP

本节课，我们一起来学习响应式布局，首先我们需要了解：什么是响应式布局？

响应式布局：只需要开发一套代码，就能使页面适应不同的屏幕（一个网站兼容多种终端）
响应式设计原理：通过媒体查询来检测视口宽，针对不同视口宽做相应代码处理，来展现不同的布局和内容
流体布局和 rem/vw 布局，只是针对移动端开发的，开发出来的网站在尺寸为（320 ~ 480px）之间的屏幕上显示，才能获得好的体验。并不能适应iPad和PC 端。
响应式布局开发出来的网站，在移动、ipad、PC 端都能有好的体验，能兼容不同的屏幕尺寸，

了解了什么是响应式布局，接下来，我们会从以下几个方面来展开讲解

媒体查询的语法
响应式断点和书写位置
媒体查询的两种适配方案
响应式栅格系统
响应式后台管理系统项目开发

# 一、媒体查询的语法

TIP

我们首先来了解下，关于媒体查询，我们需要学习那些内容：

什么是媒体查询
媒体类型
媒体特性
逻辑运算符

# 1、什么是媒体查询

TIP

我们知道，一套 CSS 样式是很难适应不同大小的屏幕，所以我们需要针对不同的屏幕尺寸来书写不同的样式，这样我们写出来的页面就能在不同大小的屏幕上都正常显示。
媒体查询就是用来解决这个问题的，他能帮助我们检测不同屏幕的尺寸，然后针对不同屏幕尺寸，显示不同的样式。

我们来看一个简单的媒体查询代码：

<style>
  /*
        @media 是关键字：媒体查询
        screen 媒体类型：屏幕设备
        and 逻辑运算符：与 (多个条件同时满足)
        min-width 媒体特性：设备宽>=400px
        以下整个媒体查询代码的含义：网页是在屏幕设备上显示，同时屏幕设备的宽>=400px时，背景颜色变为红色。
    */
  @media screen and (min-width: 400px) {
    body {
      background-color: red;
    }
  }
</style>

一个完整的媒体查询语句，包含以下四个部分：

@media 关键字
媒体类型
逻辑运算符
媒体特性

@media 媒体类型 逻辑操作符 (媒体特性) {
  ...css样式....;
}

接下来我将针对以上 4 个部分，分别做详细的讲解

# 2、媒体类型

TIP

媒体类型（Media types）就是用来描述设备的一般类别，设备类别主要分为以下 4 种

媒体类型	说明
all	（默认值）适用于所有的设备
screen	适用于屏幕设备（如电脑、手机、电视机等）
print	适用于在打印预览模式下在屏幕上查看的分页材料和文档
speech	适用于语音合成器

如果媒体查询语句，只指定媒体类型，可以简写成如下:

@media 媒体类型 ｛ .... css样式..... ｝;

案例演示

all 是默认值，在媒体类型不写的情况下，默认就是 all，适用于所有设备

@media {
  body {
    background-color: red;
  }
}

/* 上面代码等同于下面写法，但实际开发中，不会省略简写，如果是all还是加上最安全 */
@media all {
  body {
    background-color: red;
  }
}

screen 适用于屏幕设备

/* 在屏幕设备下，背景色为红色 */
@media screen {
  body {
    background-color: red;
  }
}

print 适用于打印预览模式

<style>
  /* 正常情况下应用的 css样式 */
  body {
    background-color: skyblue;
    color: red;
    font-size: 20px;
  }
  /* 在打印模式下应用的 css样式*/
  @media print {
    body {
      background-color: red;
      color: yellow;
      font-size: 50px;
    }
  }
</style>
<body>
  我就是我不一样的花朵
</body>

正常模式下预览效果	打印模式下预览效果

温馨提示：

要看到打印模式下效果，按以下步骤操作即可

在浏览器中右击 -> 打印（点击进入） -> 更多设置（点击）-> 背景图形（勾选上）就可以生效，看到效果了

在实际的开发中，我们用到的最多也就是 all,screen

# 3、媒体特性

TIP

媒体特性（Media features）描述了 user agent （用户代理-在网页中指浏览器）、输出设备，或是浏览环境的具体特征。
媒体特性表达式是完全可选的
它负责测试这些特性或特征是否存在、值为多少。
每条媒体特性表达式都必须用 括号（） 括起来。

常用的媒体特性

媒体特性	说明
width	设备屏幕的宽
min-width	设备屏幕的最小宽 (如`min-width:400px;`表示屏幕宽`>=400px`)
max-width	设备屏幕的最大宽 (如`max-width:1200px;`表示屏幕宽`<=1200px`)
-webkit-device-pixel-ratio	设备像素比(dpr)的值（只有-webkit 内核的才支持）
-webkit-max-device-pixel-ratio	设备像素比(dpr)的最大值（只有-webkit 内核的才支持）
-webkit-min-device-pixel-ratio	设备像素比(dpr)的最小值（只有-webkit 内核的才支持）
orientation	当前屏幕的方向，是横屏还竖屏 portrait: 表示竖屏（`orientation : portrait;`) landscape:表示横屏（`orientation:landscape;`)

如果只指定媒体特性，写法如下：

@media （媒体特性） {
  ...css样式...;
}

如果同时指定媒体类型和媒体特性，中间需要有逻辑运算符，写法如下：

@media 媒体类型 逻辑运算符 （媒体特性） {
  .... css样式....;
}

多个媒体特性中间也要有逻辑操运算符

@media 媒体类型 逻辑操运算符 （ 媒体特性） 逻辑操作符 （媒体特性） {
  .... css样式....;
}

案例演示

/* 所有设备的宽>=400px时，body的背景色为红色 */
@media (min-width: 400px) {
  body {
    background-color: red;
  }
}

/* 屏幕设备的宽>=400px时，body的背景色为红色 */
@media screen and (min-width: 400px) {
  body {
    background-color: red;
  }
}

/* 屏幕设备的宽>=400 同时<=500px时，body的背景色为红色 */
@media screen and (min-width: 400px) and (max-width: 500px) {
  body {
    background-color: red;
  }
}

通过判断设备像素比 dpr，来设置对应样式

dpr = (在一个方向上）设备像素（物理像素） / 逻辑像素（CSS 像素）

/* dpr>=2时，body的背景色为红色 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    background-color: red;
  }
}
/* dpr>=3时，body的背景色为蓝色 */
@media screen and (-webkit-min-device-pixel-ratio: 3) {
  body {
    background-color: blue;
  }
}

经典应用：移动端 1 像素问题，不清楚，可以看上一篇文章

通过判断用户是竖屏还是横屏观看，来设置对应样式

<style>
  /* 模屏观看时的CSS样式 */
  @media screen and (orientation: landscape) {
    .box {
      width: 100%;
      height: 200px;
      background-color: red;
    }
  }
  /* 竖屏观看时的 CSS样式 */
  @media screen and (orientation: portrait) {
    .box {
      width: 100%;
      height: 700px;
      background-color: blue;
    }
  }
</style>
<body>
  <div class="box"></div>
</body>

GIF 2022-8-18 21-12-02

# 4、逻辑运算符

TIP

逻辑运算符（logical operators） not,and和only可用于联合构造复杂的媒体查询
您还可以通过用 ,（逗号） 分隔多个媒体查询，将它们组合为一个规则。

逻辑运算符	说明
and	`and` 操作符用于将多个媒体查询规则组合成单条媒体查询当每个查询规则都为真时则该条媒体查询为真
`,`逗号	逗号用于将多个媒体查询合并为一个规则逗号分隔列表中的每个查询都与其他查询分开处理如果列表中的任何查询为 true，则整个 media 语句均返回 true。换句话说，列表的行为类似于逻辑或`or`运算符
not	`not`运算符用于否定媒体查询如果不满足这个条件则返回`true`，否则返回`false` `not`关键字只能用于否定整个媒体查询如果使用 not 运算符，则还必须指定媒体类型。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询(因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询)
only	only 关键字，主要是为了兼容一些老版本的浏览器时，防止出错而加上的。现代浏览器都完全支持了媒体查询，所以 only 关键字可以省略不需要了。

# 4.1、and 运算符

TIP

and 操作符用于将多个媒体查询规则组合成单条媒体查询
当每个查询规则都为真时，则该条媒体查询为真

/* 
    需要满足以下3个条件，body背景颜色才为红色
    屏幕设备
    屏幕的宽>=500px
    竖屏观看时
*/
@media screen and (min-width: 500px) and (orientation: portrait) {
  body {
    background-color: red;
  }
}

# 4.2、逗号逻辑运算符

TIP

逗号用于将多个媒体查询合并为一个规则
每个逗号前为一个独立的查询规则，逗号后为一个独立的查询规则
逗号分隔的每一个独立的查询规则中，只要有一个为true，则整个 media 语句返回true。
换句话说 , 逗号 类似于js中的逻辑或or运算符

/*
	以下查询语句，有两个独立的查规则
	1、screen and (min-width:400px)  设备为屏幕设备，同时屏幕宽>=400px 时成立
	2、(max-width:375px)  任何设备，设备宽>=385px时成立
	以上两条规则中，只要有一条成立，整个media语句为真，body的背景颜色就会设为红色。
*/
@media screen and (min-width: 400px), (max-width: 375px) {
  body {
    background-color: red;
  }
}

/*
	当设备为屏幕设备，同时宽<=375px时   或  当设备为屏幕设备，同时横屏观看时，背景色为红色
*/
@media screen and (max-width: 375px), screen and (orientation: landscape) {
  body {
    background-color: red;
  }
}

# 4.3、not 运算符

TIP

not运算符会反转 单个媒体查询规则 的含义
- 如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询
如果不满足这个条件则返回true，否则返回false
如果使用not运算符，则还必须指定媒体类型
not只能用来否定整个媒体查询，所以不能放在 screen 之后

错误写法

/* not运算符中，没有指定媒体类型  */
@media not (min-width: 500px) {
  body {
    background-color: red;
  }
}

/* not 只能用来否定整个媒体查询，所以不能放在screen之后 */
@media screen not (min-width: 500px) {
  body {
    background-color: red;
  }
}

正确写法

/* 
	not否定的是 screen and (min-width:500px) 整个查询,可以理解为除这个条件下不生效，其它都生效
	当设备是screen 并且宽<500px 或 设备为非屏幕设备时，body的背景设为红色
*/
@media not screen and (min-width: 500px) {
  body {
    background-color: red;
  }
}

not 出现在以逗号分隔的查询列表中

如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询
因此，它不会应用于以逗号分隔的媒体查询列表中的每个媒体查询

/*
	以下代码中的not只针对逗号前的查询规则取反
	not 取反的是 screen and (min-width:1000px),
	并不会对后面的screen and (orientation: landscape)
	所以当
	设备为屏幕设备，同时宽<1000px时 ，或 
	设备为非屏幕设备时，或
	设备为屏幕设备，同横屏幕观看时
	body的背景色为红色
*/
@media not screen and (min-width: 1000px), screen and (orientation: landscape) {
  body {
    background-color: red;
  }
}

# 4.4、only 运算符

TIP

only 关键字，主要是为了兼容一些老版本的浏览器时，防止出错而加上的。
现代浏览器都完全支持了媒体查询，所以 only 关键字可以省略不需要了。

# 二、响应式断点和书写位置

TIP

当我们需要为不同的屏幕尺寸来设置不同的样式时，我们就需要知道在什么屏幕尺寸下需要做出响应。

那这些不同的屏幕尺寸，就称为响应式断点(阈值）。

# 1、响应式断点（阈值）的设定

TIP

在实际的开发中，响应式断点是由公司根据项目来定的。

不过行业也会有一个标准的参考断点（Breakpoint），这里我们以 Bootstrap 框架内部的断点来给大家做讲解

屏幕大小	栅格布局中 class 名区分	断点（阈值）
超小屏（Extra small ）		<576px
小屏（Small)	-sm	576px ~ 768px （含等于）
中屏（Medium）	-md	768px ~ 992px （含等于）
大屏 (Large)	-lg	992px ~ 1200px（含等于）
超大屏 (X-Large)	-xl	1200px ~ 1400px（含等于）
超大大屏（XX-Large)	-xxl	>1400px

在实际开发中

断点并不是完全按上面列出的值来的。而是根据我们所写的项目，在对屏幕做调整时，如果觉得当前效果不符合我们的需求，需要通过设置新的断点来调整，就可以在此添加相应的断点。

以上断点是 Bootstrap （前端响应式框架）框架内部的断点，我们可以用来作为我们开发的标准来参考。

案例演示 (不同屏幕尺寸，显示不同背景色)

<style>
  /* 当屏幕宽小于576px时，以下代码生效 */
  body {
    background-color: red;
  }
  /* 当屏幕宽大于等于576px，小于768px时，以下代码生效 */
  @media screen and (min-width: 576px) {
    body {
      background-color: khaki;
    }
  }
  /* 当屏幕宽大于等于768px，小于992px时，以下代码生效 */
  @media screen and (min-width: 768px) {
    body {
      background-color: skyblue;
    }
  }
  /* 当屏幕宽大于等于992px，小于1200px时，以下代码生效 */
  @media screen and (min-width: 992px) {
    body {
      background-color: green;
    }
  }
  /* 当屏幕宽大于等于1200px时，以下代码生效 */
  @media screen and (min-width: 1200px) {
    body {
      background-color: turquoise;
    }
  }
</style>

注：

当浏览器窗口大小为 1000px 时，min-width:992px中的样式和min-width:768px中的样式都会生效
因为 css 选择器的权重相同时，写在后面的会覆盖写在前面的。
所以min-width:992px下的样式会覆盖掉min-width:768px下的样式，最终生效的是min-width:992px下的样式。
因此我们在书写断点时，要注意代码书写的位置

# 2、媒体查询的代码书写位置

TIP

媒体查询的代码可以写在 style 标签中，也可以写在单独的 CSS 文件中
不过所有媒体查询代码都要写在所有 CSS 样式的代码之后。
这样就能保证断点生效时，写在媒体查询中的代码能生效，不会被正常的样式所覆盖。

写在 style 标签中

<style>
  /* .....正常情况下的css样式....  */

  /* .....媒体查询代码 ....; */
</style>

写在单独的 css 文件中，通过 link 标签引入

/*
	media.css中写的是媒体查询的css代码
	link标签的引入位置，要放在所有css样式的最后面。
*/
<link rel="stylesheet" href="../css/media.css">

不同断点代码写入不同 css 文件中（不推荐）

media 属性中的内容，和正常的写法一样
通过 link 来引用，在 media 中来设置对应断点

<link rel="stylesheet" href="a.css" media="screen and (min-width:600px)" />
<link rel="stylesheet" href="b.css" media="screen and (min-width:1000px)" />

/* a.css文件内容 */
body {
  background-color: skyblue;
}
/* b.css文件内这从 */
body {
  background-color: red;
}

# 三、响应式两种适配方案

在实际的响应式开发中，我们会有两种通用的适配方案

PC 端优先（先考虑 PC 端，最后再考虑移动端）
移动端优先（先考虑移动端，最后再考虑 PC 端）

# 1、PC 端优先

在 @media 查询时，我们会先以 PC 端为主，适配方案代码顺序为

/* ....这里的css样式，会在屏幕宽大于1400px时生效.... */
.....css样式.....

/* 当屏幕宽度大于1200px ，但小于等于1400px时，显示如下样式 */
@media screen and (max-width: 1400px) {
}

/* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
@media screen and (max-width: 1200px) {
}

/* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
@media screen and (max-width: 992px) {
}

/* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
@media screen and (max-width: 768px) {
}

/* 当屏幕宽度小于等于576px时，显示如下样式 */
@media screen and (max-width: 576px) {
}

案例：不同屏幕尺寸下，显示不同的列数

<style>
  html,
  body {
    margin: 0;
  }
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .item {
    box-sizing: border-box;
    padding: 5px;
    /* 当屏幕宽度>1200px时，显示的宽 */
    width: 16.66666667%;
  }
  .item img {
    width: 100%;
  }
  /* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
  @media screen and (max-width: 1200px) {
    .item {
      width: 20%;
    }
  }
  /* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
  @media screen and (max-width: 992px) {
    .item {
      width: 25%;
    }
  }
  /* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
  @media screen and (max-width: 768px) {
    .item {
      width: 33.3%;
    }
  }
  /* 当屏幕宽度小于等于576px时，显示如下样式 */
  @media screen and (max-width: 576px) {
    .item {
      width: 50%;
    }
  }
  /* 当屏幕宽度小于等于480px时，显示如下样式 */
  @media screen and (max-width: 480px) {
    .item {
      width: 100%;
    }
  }
</style>
<body>
  <div class="container">
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
  </div>
</body>

GIF 2022-8-19 15-59-19

# 2、移动端优先

TIP

在 @media 查询时，我们会先以移端为主，适配方案代码顺序为

/* 当屏幕宽度小于576px,显示以上样式 */
...css样式....

/* 当屏幕宽度大于等于576px, 同时小于768px时，显示以下样式 */
@media screen and (min-width: 576px) {
}

/* 当屏幕宽度大于等于768px, 同时小于992px时，显示以下样式 */
@media screen and (min-width: 768px) {
}

/* 当屏幕宽度大于等于992px, 同时小于1200px时，显示以下样式 */
@media screen and (min-width: 992px) {
}

/* 当屏幕宽度大于等于1200px，同时小于 1400px时，显示以下样式 */
@media screen and (min-width: 1200px) {
}

/* 当屏幕宽度>=1400px ，显示如下样式 */
@media screen and (min-width: 1400px) {
}

案例：不同屏幕尺寸下，显示不同的列数

<style>
  html,
  body {
    margin: 0;
  }
  .container {
    /* 弹性布局 */
    display: flex;
    /* 放不下时，换行 */
    flex-wrap: wrap;
  }
  .item {
    /* 怪异盒子模型 */
    box-sizing: border-box;
    padding: 5px;
    /* 当屏幕宽度<481px时，显示宽度*/
    width: 100%;
  }
  .item img {
    width: 100%;
  }
  /* 当屏幕宽度大于等于480px, 同时小于576px时，显示以下样式 */
  @media screen and (min-width: 481px) {
    .item {
      width: 50%;
    }
  }
  /* 当屏幕宽度大于等于576px, 同时小于768px时，显示以下样式 */
  @media screen and (min-width: 576px) {
    .item {
      width: 33.33333333%;
    }
  }
  /* 当屏幕宽度大于等于768px, 同时小于992px时，显示以下样式 */
  @media screen and (min-width: 768px) {
    .item {
      width: 25%;
    }
  }
  /* 当屏幕宽度大于等于992px, 同时小于1200px时，显示以下样式 */
  @media screen and (min-width: 992px) {
    .item {
      width: 20%;
    }
  }
  /* 当屏幕宽度大于等于1200px，显示以下样式 */
  @media screen and (min-width: 1200px) {
    .item {
      width: 16.6666667%;
    }
  }
</style>
<body>
  <div class="container">
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
    <div class="item"><img src="images/img1.png" alt="" /></div>
  </div>
</body>

# 四、栅格布局

TIP

所谓的栅格布局，你可以简单理解为，要把一个页面或容器（如 div），分成多少份
然后设置其页面或容器中子元素占对应的份数
通常一个页面或容器会被分成：12 份，16 份，24 份
如果将网页（100%）分成 12 份，那对应不同份数所占的比例如下:

份数	占总份数的百分比%
1	8.33333333%
2	16.6666667%
3	25%
4	33.33333333%
5	41.66666667%
6	50%
7	58.33333333%
8	66.6666667%
9	75%
10	83.33333333%
11	91.66666667%
12	100%

# 1.1、百分比实现栅格布局

将页面分成 12 分，每份所占的比例

/* 以下 css 保存在 response.css 中*/
/* 不同份数，所占的宽 */
.col-1 {
  width: 8.33333333%;
}
.col-2 {
  width: 16.66666667%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33333333%;
}
.col-5 {
  width: 41.66666667%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33333333%;
}
.col-8 {
  width: 66.6666667%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33333333%;
}
.col-11 {
  width: 91.66666667%;
}
.col-12 {
  width: 100%;
}

利用栅格布局，实现一行 4 列，3 列，2 列，1 列的布局

<style>
  html,
  body {
    margin: 0;
  }
  .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    box-sizing: border-box;
    height: 100px;
    border: 1px solid red;
    margin-top: 10px;
  }
</style>
<!-- 引用 栅格布局样式 -->
<link rel="stylesheet" href="./response.css" />
<body>
  <div class="row">
    <!-- 一行4列 -->
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <div class="col col-3"></div>
    <!-- 一行3列 -->
    <div class="col col-4"></div>
    <div class="col col-4"></div>
    <div class="col col-4"></div>
    <!-- 一行2列 -->
    <div class="col col-6"></div>
    <div class="col col-6"></div>
    <!-- 一行1列 -->
    <div class="col col-12"></div>
  </div>
</body>

screencapture-127-0-0-1-5500-rem-html-2022-08-23-23_19_23(1)

# 1.2、grid 网格实现栅格布局

利用 grid 网格布局，将容器分成 12 分，每份所占的列数

/* 以下代码保存在 grid.css 文件中 */
.grid-12 {
  /* 网格布局 */
  display: grid;
  /* 将容器等分成12列 */
  grid-template-columns: repeat(12, 1fr);
}

.col-1 {
  grid-area: auto/auto/auto/span 1;
}
.col-2 {
  grid-area: auto/auto/auto/span 2;
}
.col-3 {
  grid-area: auto/auto/auto/span 3;
}
.col-4 {
  grid-area: auto/auto/auto/span 4;
}
.col-5 {
  grid-area: auto/auto/auto/span 5;
}
.col-6 {
  grid-area: auto/auto/auto/span 6;
}
.col-7 {
  grid-area: auto/auto/auto/span 7;
}
.col-8 {
  grid-area: auto/auto/auto/span 8;
}
.col-9 {
  grid-area: auto/auto/auto/span 9;
}
.col-10 {
  grid-area: auto/auto/auto/span 10;
}
.col-11 {
  grid-area: auto/auto/auto/span 11;
}
.col-12 {
  grid-area: auto/auto/auto/span 12;
}

利用栅格布局，实现一行 4 列，3 列，2 列，1 列的布局

<style>
  .container {
    height: 100px;
    margin: 10px 0;
  }
  .grid-item {
    padding: 10px;
    font-size: 20px;
    color: red;
  }
  /* 奇数项背景颜色 */
  .grid-item:nth-child(2n + 1) {
    background-color: skyblue;
  }
  /* 偶数项背景颜色 */
  .grid-item:nth-child(2n) {
    background-color: tomato;
  }
</style>
<!-- 引用 栅格布局样式 -->
<link rel="stylesheet" href="./grid.css" />
<body>
  <div class="container grid-12">
    <div class="grid-item col-3">1</div>
    <div class="grid-item col-3">2</div>
    <div class="grid-item col-3">3</div>
    <div class="grid-item col-3">3</div>
  </div>
  <div class="container grid-12">
    <div class="grid-item col-4">1</div>
    <div class="grid-item col-4">2</div>
    <div class="grid-item col-4">3</div>
  </div>
  <div class="container grid-12">
    <div class="grid-item col-6">1</div>
    <div class="grid-item col-6">2</div>
  </div>
  <div class="container grid-12">
    <div class="grid-item col-6">1</div>
    <div class="grid-item col-3">2</div>
    <div class="grid-item col-3">2</div>
  </div>
</body>

注：

可以去 Bootstrap 官网，下载对应的源码，查看 Bootstrap 的栅格系统，Bootstrap 底层是将页面分成 12 份。

# 五、响应式栅格系统

在实际开发中

要完美的实现响应式系统或网站的开发，就需要利用响应式栅格系统来帮助我们实现。
BootStrap 框架实现响应式布局的本质就是他的响应式栅格系统。
响应式栅格系统是：栅格布局 + 响应断点 +响应式适配方案 3 者结合实现的一套响应式解决方案

# 1、响应式栅格系统实现步骤

TIP

我们可以按以下 4 步骤来实现响应式栅格系统

你打算将页面分成多少份？
确定响应断点有哪些？
确定响应式适配方案（PC 端优先或移动端优先）
在对应的响应断点下，书写对应的栅格布局样式。（这一步，实现响应式栅格系统）

# 2、你打算将页面分成多少份？

假设

我们将页面分成 12 份，那对应不同份数占总份数的比例

份数	占总份数的百分比%
1	8.33333333%
2	16.6666667%
3	25%
4	33.33333333%
5	41.66666667%
6	50%
7	58.33333333%
8	66.6666667%
9	75%
10	83.33333333%
11	91.66666667%
12	100%

# 2、确定响应断点有哪些？

假设整个响应式效果，对应的断点如下：

< 576px
576px ~ 768px （含等于）
768px ~ 992px （含等于）
992px ~ 1200px（含等于）
大于 1200px

# 3、确定响应式适配方案

响应式适配方案有两种：

PC 端优先和移动端优先，这里我们选择 PC 端优先
PC 端优先适配方案与断点结合，得到如下代码 !

<style>
  /* 大于1200px的样式写在这里 */
  /* ....css样式.... */

  /* 当屏幕宽>1200 px 同时<=1400px ，显示如下样式 */
  @media screen and (max-width: 1400px) {
  }
  /* 屏幕宽>992px，同时<=1200px时，样式写在这里 */
  @media screen and (max-width: 1200px) {
  }
  /* 屏幕宽>768px，同时<=992px时，样式写在这里 */
  @media screen and (max-width: 992px) {
  }
  /* 屏幕宽>766px，同时<=768px时，样式写在这里 */
  @media screen and (max-width: 768px) {
  }
  /* 屏幕宽<=576px样式写在这里 */
  @media screen and (max-width: 576px) {
  }
</style>

# 4、在对应的响应断点下，书写对应的栅格布局样式

TIP

以下 css 样式放在 media.css 中，后面引入的 media.css 就是这里的代码

以下 css 代码，我们就称之为 响应式栅格系统

注意：当屏幕小于 576px ，对应的类名为 col-1 、 ..... 、 col-12

点击查看完整源代码

/* 
第一：我们将页面分成12分
第二：我们选择的断点是行业标准断点
第三：我们选择的适配方案，是PC端优先
*/

/* ....这里的css样式，会在屏幕宽大于1400px时生效.... */

.col-xxl-1 {
  width: 8.333333%;
}
.col-xxl-2 {
  width: 16.6666667%;
}
.col-xxl-3 {
  width: 25%;
}

.col-xxl-4 {
  width: 33.33333333%;
}
.col-xxl-5 {
  width: 41.66666667%;
}
.col-xxl-6 {
  width: 50%;
}
.col-xxl-7 {
  width: 58.33333333%;
}
.col-xxl-8 {
  width: 66.6666667%;
}
.col-xxl-9 {
  width: 75%;
}
.col-xxl-10 {
  width: 83.33333333%;
}
.col-xxl-11 {
  width: 91.66666667%;
}
.col-xxl-12 {
  width: 100%;
}

/* 当屏幕宽度大于1200px ，但小于等于1400px时，显示如下样式 */
@media screen and (max-width: 1400px) {
  .col-xl-1 {
    width: 8.333333%;
  }
  .col-xl-2 {
    width: 16.6666667%;
  }
  .col-xl-3 {
    width: 25%;
  }

  .col-xl-4 {
    width: 33.33333333%;
  }
  .col-xl-5 {
    width: 41.66666667%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.33333333%;
  }
  .col-xl-8 {
    width: 66.6666667%;
  }
  .col-xl-9 {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.33333333%;
  }
  .col-xl-11 {
    width: 91.66666667%;
  }
  .col-xl-12 {
    width: 100%;
  }
}

/* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
@media screen and (max-width: 1200px) {
  .col-lg-1 {
    width: 8.333333%;
  }
  .col-lg-2 {
    width: 16.6666667%;
  }
  .col-lg-3 {
    width: 25%;
  }

  .col-lg-4 {
    width: 33.33333333%;
  }
  .col-lg-5 {
    width: 41.66666667%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33333333%;
  }
  .col-lg-8 {
    width: 66.6666667%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33333333%;
  }
  .col-lg-11 {
    width: 91.66666667%;
  }
  .col-lg-12 {
    width: 100%;
  }
}

/* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
@media screen and (max-width: 992px) {
  .col-md-1 {
    width: 8.333333%;
  }
  .col-md-2 {
    width: 16.6666667%;
  }
  .col-md-3 {
    width: 25%;
  }

  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-5 {
    width: 41.66666667%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33333333%;
  }
  .col-md-8 {
    width: 66.6666667%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33333333%;
  }
  .col-md-11 {
    width: 91.66666667%;
  }
  .col-md-12 {
    width: 100%;
  }
}

/* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
@media screen and (max-width: 768px) {
  .col-sm-1 {
    width: 8.333333%;
  }
  .col-sm-2 {
    width: 16.6666667%;
  }
  .col-sm-3 {
    width: 25%;
  }

  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-8 {
    width: 66.6666667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-12 {
    width: 100%;
  }
}

/* 当屏幕宽度小于等于576px时，显示如下样式 */
@media screen and (max-width: 576px) {
  .col-1 {
    width: 8.333333%;
  }
  .col-2 {
    width: 16.6666667%;
  }
  .col-3 {
    width: 25%;
  }

  .col-4 {
    width: 33.33333333%;
  }
  .col-5 {
    width: 41.66666667%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33333333%;
  }
  .col-8 {
    width: 66.6666667%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33333333%;
  }
  .col-11 {
    width: 91.66666667%;
  }
  .col-12 {
    width: 100%;
  }
}

# 六、实现响应式效果

TIP

利用上面写的 响应式栅格系统，来实现如下图所示的响应效果， 1 行四列，变 2 列，变 1 列

如果是以移动端优先，则对着移动端设计稿来开发，然后再通过适配慢慢过渡到 PC 端。
如果是 PC 端优先，则对着 PC 端设计稿来开发，然后再通过适配慢慢过渡到移动端。

GIF 2022-8-19 19-17-22

<!-- 栅格系统的代码样式在media.css文件中 ,具体代码，就是步骤4种的代码 -->
<link rel="stylesheet" href="./css/media.css" />
<style>
  html,
  body {
    margin: 0;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
  }
  .col {
    box-sizing: border-box;
    border: 1px solid red;
    margin: 10px 0;
    min-height: 100px;
  }
</style>
<body>
  <div class="row">
    <!--
		大于 1200px 显示  3列 
		大于 992px 显示 2列
		大于 768px 显示 1列
		
	-->
    <div class="col col-xl-3 col-lg-6 col-sm-12">1</div>
    <div class="col col-xl-3 col-lg-6 col-sm-12">2</div>
    <div class="col col-xl-3 col-lg-6 col-sm-12">3</div>
    <div class="col col-xl-3 col-lg-6 col-sm-12">4</div>
  </div>
</body>

# 七、实战应用

利用响应式栅格系统实现如下所示的响应式布局

GIF2025-1-1123-16-04

TIP

不同响应式断点下的的效果

当视口宽 >1200px 时，以正常效果显示
当视口宽 <= 1200px 时，上面一行 4 列，变成 1 行 2 列
当视口宽 <= 992px 时，第二和第三行的一行 2 列变 1 列，最下面的一行 3 列变成 1 行 2 列和 1 行 1 列
当视口宽 <= 768px 时，全部一行一列显示，同时上面的导航变成点击下拉菜单形式

确定适配方案以 PC 端优先，所以我们按 PC 的设计稿来开发，然后慢慢过渡到移动端

点击查看完整源代码

<style>
  body {
    margin: 0;
    background-color: #ddd;
  }
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .col {
    min-height: 100px;
    /* width:25%; */
    box-sizing: border-box;
    padding: 10px;
  }
  .col-content {
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
  }

  .main {
    margin: 20px;
    max-width: 1400px;
    margin: 0px auto;
  }
</style>
<body>
  <main class="main">
    <div class="row">
      <div class="col col-xxl-3 col-lg-6 col-sm-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-3 col-lg-6 col-sm-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-3 col-lg-6 col-sm-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-3 col-lg-6 col-sm-12">
        <div class="col-content"></div>
      </div>
    </div>
    <div class="row">
      <div class="col col-xxl-8 col-md-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-4 col-md-12">
        <div class="col-content"></div>
      </div>
    </div>
    <div class="row">
      <div class="col col-xxl-4 col-md-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-8 col-md-12">
        <div class="col-content"></div>
      </div>
    </div>
    <div class="row">
      <div class="col col-xxl-4 col-md-6 col-sm-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-4 col-md-6 col-sm-12">
        <div class="col-content"></div>
      </div>
      <div class="col col-xxl-4 col-md-12 col-sm-12">
        <div class="col-content"></div>
      </div>
    </div>
  </main>
</body>

# 八、响应式后台管理系统项目开发

TIP

利用响应式栅格系统实现以下响应式后台管理界面开发，PSD 设计稿已上传至钉钉群，可以找助理老师获取。

image-20220508004130308.95d7aebe

ipad-iphone.3c8d4a8d

# 1、整个项目的开发流程

TIP

系统了解响应式项目开发的完整流程

# 2 、搭建项目文件夹结构

TIP

新建文件夹 WebApp
在 WebApp 中新建 css、js、images、iconfont 等文件夹，分别用来放 css、js、图片、阿里图标内容。
新建 global.css、reset.css、index.css、media.css，分别用来存放全局样式、重置样式、首页样式、通用响应式样式。
新建 index.html 文件，然后按以下顺序引用 CSS 文件

/* 重置样式 */
css代码...

/* 网站通用布局 */
css代码...

/* 通用模块 */
css代码...

/* 通用元件 */
css代码...

/* 通用响应式系统 */
css代码...

<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/global.css" />
<link rel="stylesheet" href="./css/index.css" />
<link rel="stylesheet" href="./css/media.css" />

# 3、确定栅格系统样式（media.css 样式）

按以下 3 步骤，确定 media.css 样式

将页面分成 12 份，确定栅格布局不同份数所点比例
确定项目对应的断点
- 当视口宽大于 1400px 时，以正常效果显示
- 当视口宽 <= 1400px 时，左侧菜单缩放到 75px
- 当视口宽 <= 1300px 时，左侧菜单隐藏
- 当视口宽 <= 1200px 时，上面一行 4 列，变成 1 行 2 列
- 当视口宽 <= 992px 时，第二行的一行 2 列变 1 列，最下面的一行 3 列变成 1 行 2 列和 1 行 1 列
- 当视口宽 <= 768px 时，全部一行一列显示，同时上面的导航变成点击下拉菜单形式
确定适配方案，以 PC 端优先

最终确定 media.css 文件的代码如下

注意： 下面命名和标准有点一样，写成了 xlg 和 xxlg。大家可以将名字改成xl 和 xxl

/* 大于1400px时，样式写在这里 */
.col-xxlg-1 {
  width: 8.33333333%;
}
/* 此处省略了 .col-xxlg-2 到 .col-xxlg-11 样式，自己补充 */
.col-xxlg-12 {
  width: 100%;
}

/* 小于等于1400px的样式写在这里 */
@media screen and (max-width: 1400px) {
  .col-xlg-1 {
    width: 8.33333333%;
  }
  /* 此处省略了 .col-xlg-2 到 .col-xlg-11 样式，自己补充 */
  .col-xlg-12 {
    width: 100%;
  }
}

@media screen and (max-width: 1300px) {
  /*  ..... .... */
}
/* 屏幕宽>992px，同时<=1200px时，样式写在这里 */
@media screen and (max-width: 1200px) {
  .col-lg-1 {
    width: 8.33333333%;
  }
  /* 此处省略了 .col-lg-2 到 .col-lg-11 样式，自己补充 */
  .col-lg-12 {
    width: 100%;
  }
}
/* 屏幕宽>768px，同时<=992px时，样式写在这里 */
@media screen and (max-width: 992px) {
  .col-md-1 {
    width: 8.33333333%;
  }
  /* 此处省略了 .col-md-2 到 .col-md-11 样式，自己补充 */
  .col-md-12 {
    width: 100%;
  }
}
/* 屏幕宽>576px，同时<=768px时，样式写在这里 */
@media screen and (max-width: 768px) {
  .col-sm-1 {
    width: 8.33333333%;
  }
  /* 此处省略了 .col-sm-2 到 .col-sm-11 样式，自己补充 */
  .col-sm-12 {
    width: 100%;
  }
}

# 4、对着 PC 端设计稿开发

TIP

因为确定适配方案以 PC 端优先，所以我们先按 PC 的设计稿来开发，然后开发完再通过断点的适配，一步步过渡到移动。

搭建整个网页的框架结构

<!-- header start -->
<header class="header"></header>
<!-- end header -->
<!-- nav start -->
<nav class="nav"></nav>
<!-- end nav -->
<!-- main start -->
<main class="main"></main>
<!-- end main -->
<!-- footer start -->
<footer class="footer"></footer>
<!-- end footer -->

css 样式

html,
body {
  margin: 0;
}
body {
  background-color: #f3f5f9;
}
.header {
  height: 115px;
  padding: 20px;
  width: 100%;
  background-color: #f3f5f9;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 222;
}
.nav {
  width: 260px;
  position: fixed;
  left: 20px;
  top: 115px;
  bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
}
.main {
  margin: 115px 10px 20px 290px;
  min-height: 1000px;
  background-color: khaki;
  border-radius: 10px;
}
.footer {
  height: 50px;
  background-color: #5b5b5b;
  color: #b9b9b9;
  text-align: center;
  line-height: 50px;
  position: relative;
  z-index: 22;
}

搭建右边响应式布局

以 PC 端视口宽为 1400px 时的效果来，开发页面的布局

<main class="main">
  <!-- 第一部分 -->
  <div class="main-row">
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
  </div>
  <div class="main-row">
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
  </div>
  <div class="main-row">
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
  </div>
  <div class="main-row">
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
    <div class="col">
      <div class="col-content"></div>
    </div>
  </div>
</main>

响应式项目开发完整版视频

钉钉群直播回放，或联系助理老师获取！

← 移动 WebApp 项目开发常用技术及标准、规范和最佳实践兼容多终端响应式项目开发，标准规范和最佳实践 →

大厂最新技术学习分享群

微信扫一扫进群，获取资料