CSS媒体查询:最大宽度或最大高度


490

编写CSS媒体查询时,有什么方法可以使用“或”逻辑指定多个条件?

我正在尝试做这样的事情:

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

Answers:


938

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

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

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

...此外,您可以在逗号分隔的列表中组合多个媒体查询;如果列表中的任何媒体查询为true,则将应用关联的样式表。这等效于逻辑“或”运算。


3
@media屏幕和(最大宽度:568像素)和(最大高度:320像素){}-在我的情况下,这是正确的
nosensus

5
@nosensus,逗号表示“或”关系,这意味着按照原始问题,适用规则的情况可能是正确的。您显示的代码是用于AND关系的,其中两个都必须为真才能应用规则。
Drew Noakes

你是对的。“ AND”是两个比例尺(高度和宽度)的规则,因为在某些情况下,我们需要完全一样的规则。因为您可以拥有两个设备,例如320x560和320x480,并且设备旋转会打乱您的妆容。我的意思是“逗号”和“ AND”符号具有不同的含义。
nosensus

265

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

快速答案。

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

长答案。

这里有很多东西,但是我试图使它的信息更密集,而不仅仅是蓬松的写作。这是一个学习自我的好机会!请花时间系统地阅读,希望对您有所帮助。


媒体查询

媒体查询本质上用于Web设计中,以创建特定于设备或特定情况的浏览体验。这是通过@media页面CSS中的声明完成的。在许多情况下,这可以用于不同地显示网页:无论您是使用平板电脑还是电视使用不同的宽高比,设备是彩色屏幕还是黑白屏幕,或者可能是最常见的情况是用户更改其浏览器的大小或在具有不同屏幕尺寸的浏览设备之间进行切换(通常来说,将这种设计称为“ 响应式网页设计”

逻辑运算符

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

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

1. AND(关键字)

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

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

除非以下所有条件为真,否则指定的样式规则不会生效:

  • 媒体类型为“屏幕”
  • 视口的宽度至少为700px
  • 屏幕方向当前为横向。

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

2.或(以逗号分隔的列表

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

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

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

  1. 媒体类型为“手持”
  2. 视口的宽度至少为650px,或者
  3. 屏幕方向当前为横向。

3. NOT(不是关键字)

不是关键字可以用来否定一个媒体查询(而不是整个媒体排除 --meaning,它只是一组逗号,而不是完整的媒体统治继@media声明之间否定项)。

同样,请注意not关键字会否定媒体查询,它不能用于否定媒体查询中的单个功能查询。*

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

此处指定的样式将在以下情况下生效

  1. 媒体类型和最小分辨率均不满足其要求(分别为“屏幕”和“ 300dpi”)
  2. 视口至少为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)

一个媒体查询是一组功能的查询。它们可以像一个功能查询一样简单,也可以使用and关键字构成一个更复杂的查询。媒体查询可以用逗号分隔以形成更复杂的媒体规则(请参见上面的or关键字)。

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)。使用一些代码示例进行了较小的更改,以(希望)增加解释的清晰度。


3
很好的答案,但是可以通过以尽可能简洁的方式立即提供必要答案(“最大宽度或最大高度”)的序言加以改进(请参阅fcalderans答案)。然后应遵循详尽的支持环境。许多用户期望即时解决方案,而不必花费比必要的更广泛的学习曲线。作为用户,我更希望找到一个即时答案,并可以选择追求更多的上下文,而不是不得不在额外的上下文中进行筛选以找到答案。无论如何,良好的工作和格式。
Clarus Dignus '16

3
虽然这是一篇不错的文章,但我不确定整个Media Queries入门的具体问题是否合适。或者反之,这个问题是如此具体,以至于不能回答正义。此外,“功能查询”一词并未出现在Media Queries中,而是出现在不同的CSS规范中,并且在媒体查询的上下文中使用该术语会造成混淆-但我应该告诉那些开始使用该功能的人首先是MDN文章。从媒体查询4开始,正确的术语是“媒体条件”。
BoltClock

可以说我必须支持所有iPhone设备,所以我应该分别为每个设备编写媒体查询,例如iPhone 5(纵向和横向),iPhone6,iPhone 6 Plus等。如果是,我最终将编写更多的媒体查询,涵盖所有设备的大小。我对么?
IAmRkrishnaV21

2

有两种方法可以在CSS中编写适当的媒体查询。如果您首先从较大的设备写入媒体查询,则正确的写入方式将是:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

但是,如果您首先要为较小的设备编写媒体查询,则可能是这样的:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.