本文目录：
- 1.媒体查询的概念
- 2.媒体查询的常用写法
- 3.栅格系统
- 4.响应式工具
1.媒体查询的概念
- 媒体指的就是各种设备 (移动设备, PC设备)。
- 查询指的是要检测属于哪种设备。
- 媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览。
- 怎么使用媒体查询： @media
- 核心语法示例： @media screen and (max-width: 768px) and (min-width: 320px){属性样式}，上面这属于内嵌式语法，针对一些仅在部分设备下才需要加载的css或者js文件，我们可以利用媒体查询的外链式语法，如
<link rel="stylesheet" type="text/css" href="01.css" media="only screen and (max-width: 420px)"> - 通常情况下，将设备容器依据宽度的大小分为以下四种：
- 在超小屏设备的时候 768px以下
- 在小屏设备的时候 768px-992px
- 在中屏设备的时候 992px-1200px
- 在大屏设备的时候 1200px以上
2.媒体查询的常用写法
大型设备（大台式电脑，1200px 起）
@media screen and (min-width:1200px){ ... }
中型设备（台式电脑，992px 起）
@media screen and (min-width:992px){ ... }
小型设备（平板电脑，768px 起）
@media screen and (min-width:768px) { ... }
超小设备（手机，小于 768px）
@media screen and (min-width:480px){ ... }
范围界定：当屏幕宽度大于640px且小于1000px的时候
@media screen and (max-width: 1000px) and (min-width: 640px) { ... }
3.栅格系统
了解栅格系统的原理，首先需要了解什么是栅格化。
在一个有限的、固定的平面上，用水平线和垂直线（虚拟的线，“参考线”），将平面划分成有规律的一系列“格子”（虚拟的格子），并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。通俗点来说，就是人为的把网页中的一行，等比例划分,比如将一行划分为 12 等分。然后在每个格子里进行页面开发，这就栅格化。
知道什么是栅格化后，首先我们先来实现一个最简单的栅格系统
.col1 {width: 8.33%}
.col2 {width: 16.66%}
.col3 {width: 25%}
.col4 {width: 33.33%}
.col5 {width: 41.66%}
.col6 {width: 50%}
.col7 {width: 58.33%}
.col8 {width: 66.66%}
.col9 {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}
把上面的样式添加到对应的元素上就可以把元素指定为对应的比例。
在响应式容器中，结合 @media 媒体查询，我们可以做得更多。
相信用过 bootstrap 栅格化系统的都知道，在 bootstrap 栅格化系统中，有一些 col-md col-sm 属性，它们是干什么用的呢？
其实，它们都是栅格化系统的 CSS 类名，只是针对了不同的屏幕宽度。
假如我们有这样的一个需求：
在 PC 上，因为屏幕比较大，我们要求一行显示 4 列的内容。但是在手机上，因为屏幕比较小，要求一行显示 3 列的内容。
即一个网站同时适配 PC 和手机端，根据不同的端自动调整页面。
此时，我们可以这样做：
@media (min-width: 1200px) {
.col-md1 {width: 8.33%}
.col-md2 {width: 16.66%}
......
}
@media (max-width: 1199px) {
.col-md1 {width: 8.33%}
.col-md2 {width: 16.66%}
......
}
给对应的元素添加上相应的类名：
<div class="app">
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
</div>
这样就实现了：一个 div，同时设置两个类名。当屏幕 >=1200px 时，一行显示 4 列，当屏幕 <1200px 时，一行显示3列，而且是浏览器自动调整。
boostrap中的相应类名的含义：
列：col - *** - *** => 不确定（参数）
col：列样式
第一个：屏幕的大小
大屏设备 lg 大屏设备以上生效包含本身
中屏设备 md 中屏设备以上生效包含本身
小屏设备 sm 小屏设备以上生效包含本身
超小屏设备 xs 超小屏设备以上生效包含本身
第二个***：每一行的分等份，默认分成12等份 ，数字代表的是占多少份
栅格系统的嵌套和偏移
<div class="col-xs-6 col-xs-offset-1"></div>向右偏移一格
<div class="col-xs-3 col-xs-push-9">col-xs-3</div>向后推9格
<div class="col-xs-9 col-xs-pull-3">col-xs-9</div>向前拉3格
4.响应式工具
响应式工具实现原理：
以下代码实现了带有类名.box的元素：
大屏设备 显示
中屏设备 隐藏
小屏设备 显示
超小屏设备 隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@media screen and (min-width: 1200px){
.box{
display: block;
}
}
@media screen and (min-width: 992px) and (max-width: 1200px){
.box{
display: none;
}
}
@media screen and (min-width: 768px) and (max-width: 992px){
.box{
display: block;
}
}
@media screen and (max-width: 768px){
.box{
display: none;
}
}
</style>
</head>
<body>
<div class="box">内容</div>
</body>
</html>
响应式工具（bootstrap版）
大屏设备 显示
中屏设备 隐藏
小屏设备 显示
超小屏设备 隐藏
visible-lg 大屏显示其他隐藏
visible-md
visible-sm
visible-xs
3.2版本以后 建议使用hidden
hidden-lg
hidden-md
hidden-sm
hidden-xs
