CSS的媒体查询语法可以根据不同的设备特性（如屏幕尺寸、分辨率等）应用不同的样式。基本语法如下：

@media 媒体类型 and (特性: 值) {/* 样式规则 */
}

常见的媒体类型

• screen：用于显示在屏幕上的设备
• print：用于打印机或预览页面
• all：适用于所有设备

常见的特性

• width：视口的宽度
• height：视口的高度
• min-width：最小宽度
• max-width：最大宽度
• min-height：最小高度
• max-height：最大高度
• resolution：设备的分辨率
• orientation：设备的方向（landscape为横屏，portrait为竖屏）

示例

1. 针对不同屏幕宽度设置样式

/* 屏幕宽度大于等于768px时应用 */
@media (min-width: 768px) {body {background-color: lightblue;}
}/* 屏幕宽度小于768px时应用 */
@media (max-width: 767px) {body {background-color: lightcoral;}
}

2. 针对横屏和竖屏方向设置样式

/* 竖屏模式 */
@media (orientation: portrait) {body {background-color: lightgreen;}
}/* 横屏模式 */
@media (orientation: landscape) {body {background-color: lightyellow;}
}

3. 结合多个条件使用

/* 屏幕宽度大于等于768px并且设备分辨率为高 */
@media (min-width: 768px) and (min-resolution: 192dpi) {body {background-color: lightpink;}
}

通过媒体查询，你可以为不同设备定制不同的样式，优化响应式设计。