CSS媒体查询:max-width OR max-height

Question

CSS媒体查询:max-width OR max-height

在编写CSS媒体查询时,有什么方法可以用"OR"逻辑指定多个条件吗？

我试图做这样的事情:

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

fca*_*ran 896

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

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

Run Code Online (Sandbox Code Playgroud)

来自https://developer.mozilla.org/en/CSS/Media_queries/

...此外,您可以在逗号分隔列表中组合多个媒体查询; 如果列表中的任何媒体查询为true,则应用关联的样式表.这相当于逻辑"或"操作.

那个怪异的逗号让我松了一些头发.. thx;] (36认同)
@nosensus,逗号暗示OR关系,意味着根据原始问题,要么适用于规则.您显示的代码是AND关系,其中_both_必须为true才能应用规则. (3认同)
@media屏幕和(最大宽度:568px)和(最大高度:320px){} - 在我的情况下这是正确的 (2认同)
你是对的。“AND”这是缩放（高度和宽度）的规则，因为在某些情况下，我们正是需要这样的规则。因为你可以有两个设备，例如 320x560 和 320x480，设备旋转会破坏你的组合。我的意思是“逗号”和“与”符号有不同的含义。 (2认同)

Answer 2

mat*_*ets 251

CSS媒体查询和逻辑运算符:简要概述;)

快速回答.

用逗号分隔规则: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

答案很长.

这里有很多,但我试图让信息密集,而不仅仅是蓬松的写作.这是学习自己的好机会!花点时间系统阅读,我希望它会有所帮助.

媒体查询

媒体查询基本上用于网页设计,以创建特定于设备或情境的浏览体验; 这是使用@media页面CSS中的声明来完成的.这可用于在很多情况下以不同方式显示网页:无论您是在具有不同宽高比的平板电脑还是电视上,您的设备是彩色屏幕还是黑白屏幕,或者最常见的情况是用户改变浏览器的大小或在具有不同屏幕尺寸的浏览设备之间切换(一般来说,这样的设计被称为响应式Web设计)

逻辑运算符

在针对这些情况进行设计时,似乎有四个逻辑运算符可用于在定位各种设备或视口大小时需要更复杂的需求组合.

(注意:如果您不了解媒体规则,媒体查询和功能查询之间的差异,请首先浏览此答案的底部部分,以便更好地了解与媒体查询语法相关的术语

1. AND(和关键字)

要求在样式规则生效之前必须满足指定的所有条件.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

除非以下所有评估为true,否则指定的样式规则将不会到位:

媒体类型是"屏幕" 和
视口是至少700像素宽和
屏幕方向目前是风景.

注意:我相信这三个功能查询一起使用构成单个媒体查询.

2. OR(以逗号分隔的列表)

逗号分隔列表不是使用or关键字,而是用于将多个媒体查询链接在一起以形成更复杂的媒体规则

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

一旦任何一个媒体查询评估为true,指定的样式规则将生效:

媒体类型是"手持" 或
视口宽度至少为650像素或
屏幕方向目前是风景.

3. NOT(不是关键字)

该不是关键字可以用来否定一个媒体查询(而不是一个完整的媒体规则 --meaning,它只是一组逗号,而不是跟随@media声明全媒体规则之间否定项).

同样,注意的是,不是关键字否定媒体查询,它不能被用来否定媒体查询中的单个要素查询.*

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

如果,此处指定的样式将生效

媒体类型和最小分辨率都不符合他们的要求(分别为"屏幕"和"300dpi")或
视口宽度至少为800像素.

换句话说,如果媒体类型为"屏幕"且最小分辨率为300 dpi,则除非视口的最小宽度至少为800像素,否则规则将不会生效.

(关键字not关键字可能有点陈词滥调.如果我能做得更好,请告诉我.;)

4.仅限(仅限关键字)

据我所知,唯一的关键字用于防止旧浏览器误解新的媒体查询,因为它是较早使用的较窄的媒体类型.如果使用得当,旧的/不兼容的浏览器应该完全忽略样式.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

一个旧的/不兼容的浏览器会完全忽略这行代码,我相信它会读取唯一的关键字并将其视为不正确的媒体类型.(有关更聪明人士的更多信息,请参阅此处和此处)

更多信息

有关详细信息(包括可以查询的更多功能),请参阅:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

了解媒体查询术语

注意:我需要学习以下术语,以便有意义,特别是关于not关键字.据我所知,这是:

一个媒体规则(MDN似乎也称这些媒体的声明)包括术语@media及其所有随后的媒体查询

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

一个媒体查询是一组功能的查询.它们可以像一个特征查询一样简单,也可以使用和关键字形成更复杂的查询.媒体查询可以用逗号分隔,以形成更复杂的媒体规则(请参阅上面的或关键字).

screen (注意:这里只使用一个功能查询.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

不handheld, (min-width: 650px).(注意逗号:这里有两个媒体查询.)

一个功能查询是一个媒体规则最基本的部分,只是涉及一个给定的特征和它的状态在一个给定的浏览情况.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

代码摘要和信息来自:

CSS媒体查询由Mozilla的贡献者(协议授权的CC-BY-SA 2.5).一些代码样本使用了一些微小的改动(希望)增加解释的清晰度.

很好的答案然而它可以通过前言立即提供必要的答案("max-width OR max-height")尽可能简洁(参见fcalderans答案).然后应该遵循精心设计的支持背景.许多用户希望获得即时解决方案,而无需投入比必要的更广泛的学习曲线.作为一个用户,我更愿意找到一个即时回答_选项来追求额外的上下文,而不是必须筛选其他上下文_找到答案.无论如何,良好的工作和格式. (3认同)
虽然这是一个很好的写作,但我不太确定一个特定的问题是整个Media Queries入门的好地方.或者反过来说,问题是如此具体,以至于不做这个答案的正义.此外,术语"特征查询"未出现在媒体查询中,它出现在[不同的CSS规范](https://www.w3.org/TR/css3-conditional/#at-supports)中,并使用媒体查询中的术语令人困惑 - 但我应该首先告诉那些在MDN文章中开始使用该术语的人.媒体查询4的正确术语是"媒体条件". (3认同)

归档时间：	14 年，3 月前
查看次数：	413044 次
最近记录：	8 年前