@media怎么使用

@media 是 CSS3 中的一个语法，用于根据不同的设备或屏幕尺寸设置不同的样式。它可以根据屏幕宽度、高度、分辨率等参数来匹配不同的媒体类型，从而实现响应式布局。

使用方法如下：

@media mediatype and|not|only (media feature) {
  /* CSS rules */
}

其中，mediatype 表示媒体类型，如 screen、print、speech 等；media feature 表示媒体特性，如 width、height、orientation 等；and、not、only 是逻辑运算符，用于组合多个媒体特性。

例如，以下代码表示在屏幕宽度小于等于 768px 时，应用特定的样式：

@media screen and (max-width: 768px) {
  /* CSS rules */
}