一、响应式布局的概念：
利用媒体技术，让页面在不同的屏幕上采用不同的样式，从而让页面能够兼容多种终端设备，比如：pc端、手机端、ipad等。
二、媒体查询的语法
@media 媒体类型 查询逻辑（媒体特性：断点）{
/*具体样式*/
}
1、媒体类型：
作用：设置样式在什么样的设备下生效
种类：
screen ：屏幕设备（最常使用值）
all : 所有设备（默认值）
pint : 打印设备
speech : 屏幕阅读器，一般供残障人士使用
示例：
@media screen ...{
/* 具体样式 */
}
@media all(all可以省略) ...{
/* 具体样式 */
}
@media pint ...{
/* 具体样式 */
}
@media speech ...{
/* 具体样式 */
}
2、逻辑查询
作用： 连接查询条件，设置各个条件之间的逻辑关系
常用值：与（and） \ 或（,）\非（not）
含义：
与（and）: 查询条件全部为真时生效。
或（,）：查询条件中的任意一个为真时生效
非（not）: 对查询条件取反。
示例：
1）与（and）
@media screen and (min-width: 320px){
body{
background: red;
}
}
含义：
当设备是“屏幕设备”，并且屏幕宽度>=320px时，应用样式：
注意事项：
如果只有一个条件，则不能写and，如下写法为错误写法：
@media and (min-width: 320px){
body{
background: red;
}
}
正确写法为：
@media (min-width: 320px){ //要将and删除
body{
background: red;
}
}
多个条件之间，可以用and连接，参考如下：
/* 当设备是“屏幕设备”，并且宽度>=320px 且 <=375px 时，应该样式*/
@media screen and (min-width: 320px) and (max-width:375){
body{
background: red;
}
}
2）或（,）
@media screen and (min-width: 1200px) , screen and (max-width:320px){
body{
background: red;
}
}
含义：当设备是屏幕设备并且宽度>=1200px或者设备是屏幕设备并且宽度<=320px时，应用样式：
注意事项：
逗号‘，’前后的条件，如果媒体类型是all可以省略，如下两种写法等价：
3）非（not）:
当not 和and 一起出现时，并且没有其他查询逻辑，则not是对整个条件取反：
@media not screen and (min-width:320px) and (max-width:375px){
body{
background: red;
}
}
含义：
当设备不是‘宽度大于等于320且小于等于375的屏幕设备’时，应用样式：
当条件之间使用了“或”时，not修饰哪个条件，就是只对该条件取反，如下：
3、媒体特性：
作用：设置媒体查询的条件
常用值示例：
width 宽度
@media screen and (width : ...){
}
min-width 最小宽度
@media screen and (min-width : ...){
}
max-width 最大宽度
@media screen and (max-width : ...){
}
-webkit-device-pixel-ratio:设备像素比
-webkit-max-device-pixel-ratio:最大设备像素比
-webkit-min-device-pixel-ratio:最小设备像素比
可以通过window.devicePixelRatio获取dpr
orientation 屏幕方向
@media screen and (orientation:landscape){
//横屏下的样式
}
@media screen and (orientation:portrait){
//竖屏下的样式
}
4、断点
作用：设置样式改变时的临界值（交界点）
@media screen and (width:断点){
}
如何确定断点：
根据经验总结出的常见断点
xs <576px超小屏
sm 576px-768px 小屏
md 768px~992px 中屏
lg 992px~1200px 大屏
xl >=1200px超大屏
改变屏幕大小，当页面显示不正常（或不符合要求）时，将当前宽度设置成断点
四、媒体查询的书写位置
1、写在style标签中（推荐写法）
2、写在单独的css中（推荐）
3、将媒体查询设置在link标签上（不推荐）
五、媒体查询的策略
1、无策略
根据断点写媒体查询，每一个媒体查询可以使用max-width、min-width，将样式限定在特定的宽度内即可。
2、pc端优先
先考虑大屏，再考虑小屏，只需要使用max-width即可
3、移动端优先
先考虑最小屏，再考虑大屏，只需要使用min-width即可
那就先总结到这里吧~
今日寄语：
你唯一应该超越的人，是昨天的自己。
