媒体查询使用 @media 规则来定义，并包含一个或多个媒体特性和一个或多个样式规则。基本语法如下：
@media media-type and (media-feature) {
/* 样式规则 */
}
其中：
media-type表示媒体类型，常见的媒体类型包括all（所有设备）、screen（屏幕设备）、print（打印机）等。 如果不指定媒体类型，则默认为all。media-feature表示媒体特性，用于根据设备的属性来选择样式规则。 常见的媒体特性包括width（宽度）、height（高度）、orientation（方向）resolution（分辨率）等。
媒体特性
width和height：根据设备窗口的宽度和高度来选择样式规则。orientation：根据设备的方向（横向或纵向）来选择样式规则。min-width和max-width：设置设备窗口的最小和最大宽度来选择样式规则。min-height和max-height：设置设备窗口的最小和最大高度来选择样式规则。resolution：根据设备的分辨率来选择样式规则。aspect-ratio：根据设备窗口的宽高比来选择样式规则。device-aspect-ratio：根据设备屏幕的宽高比来选择样式规则。color和color-index：根据设备的颜色和颜色索引来选择样式规则。
媒体查询组合
您可以使用逻辑运算符 and、or 和 not 来组合多个媒体查询。
/* 针对纵向手机设备 */
@media(max-width: 768px) and (orientation: portrait){
}
/* 针对横向手机设备 */
@media(max-height: 768px) and (orientation: landscape){
}