CSS-媒体查询

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

原文地址：https://blog.csdn.net/weixin_46479909/article/details/142384311

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！