目录
一、媒体查询
使⽤@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺⼨设置不同的样式
当重制浏览器⼤⼩的过程中，⻚⾯也会根据浏览器的宽度和⾼度重新渲染⻚⾯
扫描二维码关注公众号，回复： 14639595 查看本文章
二、语法
@media 媒体类型 关键字 （媒体特性）{css}
媒体类型（可以同时⽤多个媒体类型，⽤逗号隔开,这样他们之间就是或的关系）
all 所有设备
print 打印设备或打印预览
screen 带屏幕的设备（电脑，⼿机）**
speech 屏幕阅读器
关键字 and not only 来连接
将媒体类型或多个媒体特性连接到⼀起作为媒体查询的条件
and：可以将多个媒体特性连接到⼀起，相当于且的意思
not：排除某个媒体类型，相当于“⾮”的意思，可以省略
only：指定某个特定的媒体类型，可以省略
三 、媒体特性(必须要有⼩括号)
媒体特性(必须要有⼩括号)
width ⻚⾯可⻅宽度
max-width 视⼝的最⼤宽度（视⼝⼩于指定宽度时就⽣效，⼩于等于xxxpx）
min-width 视⼝的最⼩宽度（视⼝⼤于指定宽度时就⽣效）
max-height 最⼤⾼度
min-height 最⼩⾼度
orientation:landscape 横屏
orientation:portrait 竖屏
四、常⽤的断点
样式切换的分界点，我们称其为断点，也就是⽹⻚的样式
| 尺寸范围 | 设备划分 | |
| <768px | 超小屏幕 | max-width=768px |
| >=768px~<992px | 小屏幕 | min-width=768px |
| >=992px ~<1200px | 中屏幕 | min-width=992px |
| >=1200px | 大屏幕 | min-width=1200px |
五、引入方式
<style>
body {
background-color: red;
}
/* 第⼀种⽅式 直接引⼊ */
/* 在992px-768px之间设置的样式 */
按照设计稿与设备宽度的⽐例，动态计算并设置html根标签的font-size⼤⼩（媒体查询）
css中，设计稿元素的宽、⾼、相对位置等取值，按照同等⽐例换算为rem为单位的值
根字体=（⼿机横向设备独⽴像素值）/10 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，
即1rem=37.5px
如果设计稿是375px 例如：iPhone6，根字体=375/10=37.5px 以rem为单位，即1rem=37.5px
⻚⾯中数值为：设计值/（设计稿宽度/10） 例如：100px/（375px/10）=2.667rem
⼿机横向设备独⽴像素值，可以⽤flexible.js计算，⽤⾥⾯的js去做处理
css元素的设计值换算⽤css中的Cssrem: Root Font Size去实现 px to rem & rpx & vw (cssrem)
只要确定当前html⽂字⼤⼩就可以了.
@media screen and (max-width: 992px) and (min-width: 768px) {
body {
background-color: orange;
}
}
/* 可以简写，默认写了screen and */
@media (max-width: 768px) {
body {
background-color: yellowgreen;
}
}
</style>
<!-- 第⼆种⽅式：外接式，针对不同的界⾯效果，可以写不同的样式，分别引⼊，写的时候，最好从⼩
到⼤来写
语法：media="媒体类型 关键字 (媒体特性)
-->
<link rel="stylesheet" href="./600.css" media="screen and (max-width:
600px) " />