Answers:
使用逗号指定两个(或多个)不同的规则:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
从https://developer.mozilla.org/en/CSS/Media_queries/
...此外,您可以在逗号分隔的列表中组合多个媒体查询;如果列表中的任何媒体查询为true,则将应用关联的样式表。这等效于逻辑“或”运算。
快速答案。
用逗号分隔规则:
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
长答案。
这里有很多东西,但是我试图使它的信息更密集,而不仅仅是蓬松的写作。这是一个学习自我的好机会!请花时间系统地阅读,希望对您有所帮助。
媒体查询本质上用于Web设计中,以创建特定于设备或特定情况的浏览体验。这是通过@media
页面CSS中的声明完成的。在许多情况下,这可以用于不同地显示网页:无论您是使用平板电脑还是电视使用不同的宽高比,设备是彩色屏幕还是黑白屏幕,或者可能是最常见的情况是用户更改其浏览器的大小或在具有不同屏幕尺寸的浏览设备之间进行切换(通常来说,将这种设计称为“ 响应式网页设计”)
在针对这些情况进行设计时,似乎有四个逻辑运算符可用于在针对各种设备或视口大小时要求更复杂的需求组合。
(注意:如果您不了解媒体规则,媒体查询和功能查询之间的区别,请先浏览此答案的底部,以更好地了解与媒体查询语法相关的术语
1. AND(和关键字)
要求在样式规则生效之前必须满足所有指定的条件。
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
除非以下所有条件都为真,否则指定的样式规则不会生效:
注意:我相信这三个功能查询一起使用构成了一个媒体查询。
2.或(以逗号分隔的列表)
用逗号分隔的列表而不是or关键字将多个媒体查询链接在一起以形成更复杂的媒体规则
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
指定的样式规则将在任何一个媒体查询评估为true时生效:
3. NOT(不是关键字)
该不是关键字可以用来否定一个媒体查询(而不是整个媒体排除 --meaning,它只是一组逗号,而不是完整的媒体统治继@media声明之间否定项)。
同样,请注意,not关键字会否定媒体查询,它不能用于否定媒体查询中的单个功能查询。*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
此处指定的样式将在以下情况下生效
换句话说,如果媒体类型为“屏幕”并且最小分辨率为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)。使用一些代码示例进行了较小的更改,以(希望)增加解释的清晰度。
有两种方法可以在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 */
}