介绍
@media 规则在媒体查询中用于为不同的媒体类型/设备应用不同的样式。
媒体查询可用于检查许多事情，诸如：
- 窗口的宽度和高度
- 设备的宽度和高度
- 方向（手机或平板电脑处于横屏还是竖屏模式？）
- 分辨率
使用媒体查询是一种流行的技术，用于向台式机、笔记本电脑、平板电脑和手机提供定制的样式表（响应式网页设计）。
您还可以使用媒体查询来规定某些样式仅适用于打印的文档或屏幕阅读器（mediatype：print、screen 或 speech）。
参考：
https://www.w3school.com.cn/cssref/pr_mediaquery.asp