解决方案：

• 媒体查询

       max-width 最大宽度  <768  (从大到小)

       min-width 最小宽度  >768  (从小到大)

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

需求：

1. 默认网页前景色是灰色
2. 屏幕亮度大于等于768px，网页背景色是粉色
3. 屏幕亮度大于等于992px，网页背景色是绿色
   
4. 屏幕亮度大于等于1200px，网页背景色是红色

<link rel="stylesheet" media="(max-width:768px)" href="./css/test1.css" />
<link rel="stylesheet" media="(min-width:1200px)" href="./css/test2.css" />

• Bootstrap

       简洁、直观、强悍的前端开发框架，让web开发更迅捷、简单

提供了大量编写好的css样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。

使用步骤

1. 下载Bootstrap

2. 引入Bootstrap.css文件

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

3. 调用类名 container 响应式布局版心类

<div class="container"></div>

栅格系统

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

例如：一行排4个盒子，则每个盒子占3份(12 / 4 = 3)

全局样式

Button类

• btn 默认样式
• btn-success 成功
• btn-warning 警告
• ...
• 尺寸按钮 btn-lg / btn-sm

表格类

• table 默认样式
• table-striped 隔行变色
• table-primary 表格颜色

组件

...