什么是响应式？
响应式就是一套代码可以在pc端运行（体验不错），还可以在移动端上运行（体验不错）
响应式原理
根据屏幕宽度不同 去使用不同的css ==> 媒体查询
媒体查询
语法：
/* 媒体查询语法1 */
@media (width:400px){
body{
background-color: red;
}
}
/* 不只是可以针对屏幕宽度 还可以针对屏幕的高度（很少用 了解即可） */
@media screen and (height:599px) {
body{
background-color: green;
}
}
常用和推荐的写法：
/* 常用和推荐的写法 */
@media screen and (width:600px) {
body{
background-color: yellow;
}
}
媒体查询-指定区间写法
/*
当屏幕的宽度 小于 100px red （最大就是100px）
*/
@media screen and (max-width: 100px) {
body {
background-color: red;
}
}
/* 当屏幕的宽度 大于 500px green (最小就是500px) */
@media screen and (min-width: 500px) {
body {
background-color: green;
}
}
/* 当屏幕的宽度 大于 300 小于 500px yellow */
@media screen and (min-width: 300px) and (max-width: 500px) {
body {
background-color: yellow;
}
}
响应式UI框架使用：bootstrap
使用方式
1、下载，进入网站v3.bootcss.com/getting-sta…
解压文件，改名为bootstrap，导入至项目文件夹lib下（外部资源）
2、使用方式：
<!-- 1 要引入 bootstrap css文件 -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<!-- 此文件需要自行下载，创建文件 *.js
下载地址：https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js
复制粘贴里面的内容即可
-->
<!-- 2 要引入 jquery.js -->
<script src="./lib/jquery.js"></script>
<!-- 3 引入 bootstrap.js -->
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
栅格系统：
栅格系统（boostrap的核心，也是实现响应式布局的核心 媒体查询 ）
<!--
1 bootstrap将屏幕按照宽度分成四种
1 大屏幕 lg >1200px
2 中等屏幕 md 992px-1200px
3 小屏幕 sm 768px-992px
4 极小屏幕 xs <768px
2 固定用法
1 先外层写一个 类 名字是固定 container
2 里面写一个类 row 固定
3 根据需求 （在什么样的屏幕下 一行 显示几个元素 ）
bootstrap 默认将一行 划分成了12份 12列 1列就占一份
-->
<div class="container">
<div class="row">
<!-- 在大屏幕下 每一列占一份 -->
<!-- 在大屏幕下 每一列占三份 -->
<!-- 在大屏幕下 每一列 占2份 -->
<!-- 关键就是 在什么样的屏幕下 每一列占几份 -->
<div class="col-lg-2">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-2">5</div>
<div class="col-lg-2">6</div>
</div>
</div>
栅格系统深入研究：
<!--
1 如果一行超过了12份 和浮动的特性一样 往下掉
2 .container 居中的版心 宽度会跟随屏幕宽度的变化而变化 （不用管多少px 版心会自动调整大小就可以了）
有些时候 网页设计
需要版心 container
全屏 .container-fluid
只要你写了栅格代码，那么就不能省略 container(版心)-container-fluid(全屏)
3 要想好 代码在每一种屏幕下的表现
1 大屏幕下 一列占一份
2 极小屏幕下 一列占二份
3 变成 中等屏幕
仅仅是因为 bootstrap自己额外做了设置而已
自动设置了 让较大屏幕 去沿用较小屏幕的设置
-->
<div class="container-fluid">
<div class="row">
<!-- 大屏幕下 一列占一份 -->
<div class="col-lg-1 col-xs-2">1</div>
<div class="col-lg-1 col-xs-2">2</div>
<div class="col-lg-1 col-xs-2">3</div>
<div class="col-lg-1 col-xs-2">4</div>
<div class="col-lg-1 col-xs-2">5</div>
<div class="col-lg-1 col-xs-2">6</div>
<div class="col-lg-1 col-xs-2">7</div>
<div class="col-lg-1 col-xs-2">8</div>
<div class="col-lg-1 col-xs-2">9</div>
<div class="col-lg-1 col-xs-2">10</div>
<div class="col-lg-1 col-xs-2">11</div>
<div class="col-lg-1 col-xs-2">12</div>
<div class="col-lg-1 col-xs-2">13</div>
</div>
</div>
大屏状态：
代码设置的极小屏幕下占没列占2份，会向上兼容，导致大屏一下都是每列占两份
**仅仅是因为 bootstrap自己额外做了设置而已 自动设置了 让较大屏幕 去沿用较小屏幕的设置 **
大屏（1200）以下就变为了小屏的设置
