CSS-媒体查询

小沐°2024-09-21 11:10

媒体查询使用 @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){
  
}