媒体查询

body {
    background-color:red;
}
@media only screen and (max-width: 600px) {
    body {
        background-color: yellow;
    }
}
@media only screen and (max-width: 500px) {
    body {
        background-color:blue;
    }
}

①用 @media 开头 注意@符号

②mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）

③关键字 and not only
（1）and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
（2）not：表示排除某个媒体类型，相当于“非”的意思，可以省略
（3）only：表示指定某个特定的媒体类型，可以省略

④media feature 媒体特性 必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的：
（1）width：表示输出设备中页面可见区域的宽度
（2）min-width：表示输出设备中页面最小可见区域的宽度
（3）max-width：表示输出设备中页面最大可见区域的宽度
————————————————
版权声明：本文为CSDN博主「JJ_Smilewang」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/JJ_Smilewang/article/details/124212772