在编写CSS媒体查询时,是否可以使用"OR"逻辑指定多个条件?

我正在try 这样做:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

推荐答案

使用逗号指定两个(或多个)不同规则:

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

逗号用于将多个媒体查询合并为单个规则.逗号分隔列表中的每个查询都与其他查询分开处理.因此,如果列表中的任何查询为TRUE,则整个媒体语句返回TRUE.换句话说,列表的行为类似于逻辑或运算符.

Css相关问答推荐

如何将bslib::card()中的扩展按钮移到右上方,其中full_screen = TRUE?

如何居中对齐容器父对象?

不了解重复-线性-渐变 colored颜色 停止

如何将 div 和 img 包装在 display:flex 容器中

为什么左浮动上的清除:左也会影响右浮动,以及如何避免它

清除 CSS 中已设置的填充属性以恢复 SVG 的默认值

在 WooCommerce 变体 Select 中转换属性文本以大写

我无法覆盖 react ui 库中的组件样式

Blazor 组件未链接 css

如何在特定元素之前 Select 每个元素

全部:初始与使用 CSS 重置

禁用输入的 CSS Select 器 type="submit"

Bootstrap:在列之间添加边距/填充空间

边界半径应该剪辑内容吗?

输入/按钮元素不会在 flex 容器中缩小

在 CSS3 中重新启动动画:比删除元素更好的方法吗?

如果容器 div 较小,如何将子 div 扩展到 100% 屏幕宽度?

:last-child 没有按预期工作?

为什么我的 div 边距重叠,我该如何解决?

如何在 CSS 中给出背景图像路径?