@media screen and (max-width:300px) {
        body{
          background-color: blue;
        }
  
}

前面是一个@media screen 是选择的屏幕 and 是并且 （）里满足的条件，这里是不大于300px，然后背景变蓝

语法

媒体类型mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

我们主要用的就是screen

关键字

链接媒体类型和查询条件

and:可以将多个媒体特性连接到一起，相当于"且"

not:'非‘

only:指定摸个特定类型

媒体特性

写在小括号里面

值	解释说明
width	定义输出设备中页面可见区域的宽度
min-width	最小宽度
max-width	最大宽度

rem+媒体查询实现元素动态大小

<style>
 @media screen and (min-width:300px) {
        html{
          font-size: 36px;
        }
        p{
          background-color: red;
        }
        
      }
p{
  font-size: 2rem;

}
</style>

其实很简单，元素的大小都用rem来表示，然后屏幕在发生变化的时候，改变html 的font-size值就可以了