CSS媒体查询:最大宽度或最大高度
本文翻译自:CSS media queries: max-width OR max-height
When writing a CSS media query, is there any way you can specify multiple conditions with "OR" logic? 编写CSS媒体查询时,有什么方法可以使用“或”逻辑指定多个条件?
I'm attempting to do something like this: 我正在尝试做这样的事情:
/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {...
}
#1楼
参考:https://stackoom.com/question/lqtU/CSS媒体查询-最大宽度或最大高度
#2楼
Use a comma to specify two (or more) different rules: 使用逗号指定两个(或多个)不同的规则:
@media screen and (max-width: 995px) , screen and (max-height: 700px) {...
}
From https://developer.mozilla.org/en/CSS/Media_queries/ 从https://developer.mozilla.org/en/CSS/Media_queries/
...In addition, you can combine multiple media queries in a comma-separated list; ...此外,您可以在逗号分隔的列表中组合多个媒体查询; if any of the media queries in the list is true, the associated style sheet is applied. 如果列表中的任何媒体查询为true,则将应用关联的样式表。 This is the equivalent of a logical "or" operation. 这等效于逻辑“或”运算。
#3楼
CSS Media Queries & Logical Operators: A Brief Overview ;) CSS媒体查询和逻辑运算符:简要概述;)
The quick answer. 快速答案。
Separate rules with commas: @media handheld, (min-width: 650px), (orientation: landscape) { ... }
逗号分隔的规则: @media handheld, (min-width: 650px), (orientation: landscape) { ... }
The long answer. 长答案。
There's a lot here, but I've tried to make it information dense, not just fluffy writing. 这里有很多东西,但是我试图使它的信息更密集,而不仅仅是蓬松的写作。 It's been a good chance to learn myself! 这是一个学习自我的好机会! Take the time to systematically read though and I hope it will be helpful. 请抽出时间系统地阅读,希望对您有所帮助。
Media Queries 媒体查询
Media queries essentially are used in web design to create device- or situation-specific browsing experiences; 媒体查询本质上用于Web设计中,以创建特定于设备或特定情况的浏览体验。 this is done using the @media
declaration within a page's CSS . 这是通过页面CSS中的@media
声明完成的。 This can be used to display a webpage differently under a large number of circumstances: whether you are on a tablet or TV with different aspect ratios, whether your device has a color or black-and-white screen, or, perhaps most frequently, when a user changes the size of their browser or switches between browsing devices with varying screen sizes (very generally speaking, designing like this is referred to as Responsive Web Design ) 在许多情况下,这可以用于不同地显示网页:无论您是使用平板电脑还是电视使用不同的宽高比,设备是彩色屏幕还是黑白屏幕,或者可能是最常见的情况是用户更改其浏览器的大小或在具有不同屏幕尺寸的浏览设备之间进行切换(通常,将这种设计称为“ 响应式网页设计” )
Logical Operators 逻辑运算符
In designing for these situations, there appear to be four Logical Operators that can be used to require more complex combinations of requirements when targeting a variety of devices or viewport sizes. 在针对这些情况进行设计时,似乎有四个逻辑运算符可用于在针对各种设备或视口大小时要求更复杂的需求组合。
(Note: If you don't understand the the differences between media rules, media queries, and feature queries, browse the bottom section of this answer first to get a bit better acquainted with the terminology associated with media query syntax (注意:如果您不了解媒体规则,媒体查询和功能查询之间的区别,请先浏览此答案的底部,以更好地了解与媒体查询语法相关的术语
1. AND ( and keyword) 1. AND( 和关键字)
Requires that all conditions specified must be met before the styling rules will take effect. 要求在样式规则生效之前必须满足所有指定的条件 。
@media screen and (min-width: 700px) and (orientation: landscape) { ... }
The specified styling rules won't go into place unless all of the following evaluate as true: 除非满足以下所有条件 ,否则指定的样式规则不会生效:
- The media type is 'screen' and 媒体类型为“屏幕” ,
- The viewport is at least 700px wide and 视口的宽度至少为700px ,
- Screen orientation is currently landscape. 屏幕方向当前为横向。
Note: I believe that used together, these three feature queries make up a single media query . 注意:我相信这三个功能查询一起使用构成了一个媒体查询 。
2. OR ( Comma-separated lists ) 2.或(以逗号分隔的列表 )
Rather than an or keyword, comma-separated lists are used in chaining multiple media queries together to form a more complex media rule 用逗号分隔的列表而不是or关键字将多个媒体查询链接在一起以形成更复杂的媒体规则
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
The specified styling rules will go into effect once any one media query evaluates as true : 指定的样式规则将在任何一个媒体查询评估为true时生效 :
- The media type is 'handheld' or 媒体类型为“手持” 或
- The viewport is at least 650px wide or 视口的宽度至少为650px, 或者
- Screen orientation is currently landscape. 屏幕方向当前为横向。
3. NOT ( not keyword) 3. NOT( 不是关键字)
The not keyword can be used to negate a single media query (and NOT a full media rule --meaning that it only negates entries between a set of commas and not the full media rule following the @media declaration). not关键字可用于否定单个媒体查询 (而非否定完整的媒体规则) ,这意味着它只会否定一组逗号之间的条目,而不会否定@media声明之后的完全媒体规则。
Similarly, note that the not keyword negates media queries, it cannot be used to negate an individual feature query within a media query.* 同样, 请注意 , not关键字会否定媒体查询,它不能用于否定媒体查询中的单个功能查询。*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
The styling specified here will go into effect if 此处指定的样式将在以下情况下生效
- The media type AND min-resolution don't both meet their requirements ('screen' and '300dpi' respectively) or 媒体类型和最小分辨率均不满足其要求(分别为“屏幕”和“ 300dpi”) 或
- The viewport is at least 800 pixels wide. 视口至少为800像素宽。
In other words, if the media type is 'screen' and the min-resolution is 300 dpi, the rule will not go into effect unless the min-width of the viewport is at least 800 pixels. 换句话说,如果媒体类型为“屏幕”且最小分辨率为300 dpi,则该规则将不会生效,除非视口的最小宽度至少为800像素。
(The not keyword can be a little funky to state. Let me know if I can do better. ;) (not关键字可能有点时髦。请告诉我是否可以做得更好。;)
4. ONLY ( only keyword) 4.仅( 唯一关键字)
As I understand it, the only keyword is used to prevent older browsers from misinterpreting newer media queries as the earlier-used, narrower media type. 据我了解, 唯一关键字用于防止较旧的浏览器将较新的媒体查询误解为较早使用的较窄媒体类型。 When used correctly, older/non-compliant browsers should just ignore the styling altogether. 如果正确使用,则较旧/不兼容的浏览器应完全忽略样式。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
An older / non-compliant browser would just ignore this line of code altogether, I believe as it would read the only keyword and consider it an incorrect media type . 较旧/不兼容的浏览器将完全忽略这一行代码,我相信它会读取唯一的关键字并将其视为错误的媒体类型 。 (See here and here for more info from smarter people) (请参阅此处和此处,以获取更聪明的人的更多信息)
FOR MORE INFO 有关更多信息
For more info (including more features that can be queried), see: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators 有关更多信息(包括更多可查询的功能),请参阅: https : //developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators
Understanding Media Query Terminology 了解媒体查询术语
Note: I needed to learn the following terminology for everything here to make sense, particularly concerning the not keyword. 注意:为了使这里的所有内容都有意义,我需要学习以下术语,尤其是关于not关键字。 Here it is as I understand it: 据我所知:
A media rule (MDN also seems to call these media statements) includes the term @media
with all of its ensuing media queries 媒体规则 (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)
A media query is a set of feature queries. 媒体查询是一组功能查询。 They can be as simple as one feature query or they can use the and keyword to form a more complex query. 它们可以像一个功能查询一样简单,也可以使用and关键字构成一个更复杂的查询。 Media queries can be comma-separated to form more complex media rules (see the or keyword above). 媒体查询可以用逗号分隔以形成更复杂的媒体规则(请参见上面的or关键字)。
screen
(Note: Only one feature query in use here.) screen
(注意:此处仅使用一个功能查询。)
only screen
only screen and (max-resolution:800dpi)
only tv and (device-aspect-ratio: 16/9) and (color)
NOT handheld, (min-width: 650px)
. 非handheld, (min-width: 650px)
。 (Note the comma: there are two media queries here.) (请注意逗号:这里有两个媒体查询。)
A feature query is the most basic portion of a media rule and simply concerns a given feature and its status in a given browsing situation. 功能查询是媒体规则的最基本部分,仅涉及给定功能及其在给定浏览情况下的状态。
screen
(min-width: 650px)
(orientation: landscape)
(device-aspect-ratio: 16/9)
Code snippets and information derived from: 代码片段和信息来源于:
CSS media queries by Mozilla Contributors (licensed under CC-BY-SA 2.5 ). Mozilla贡献者提供的 CSS媒体查询 (根据CC-BY-SA 2.5许可)。 Some code samples were used with minor alterations to (hopefully) increase clarity of explanation. 使用一些代码示例进行了较小的更改,以(希望)增加解释的清晰度。
#4楼
There are two ways for writing a proper media queries in css. 有两种方法可以在CSS中编写适当的媒体查询。 If you are writing media queries fro larger device first then the correct way of writing will be : 如果您首先从较大的设备写入媒体查询,则正确的写入方式将是:
@media only screen
and (min-width : 415px){/* Styles */
}@media only screen
and (min-width : 769px){/* Styles */
}@media only screen
and (min-width : 992px){/* Styles */
}
But if you are writing media queries for smaller device first then it would be something like : 但是,如果您首先要为较小的设备编写媒体查询,则可能是这样的:
@media only screen
and (max-width : 991px){/* Styles */
}@media only screen
and (max-width : 768px){/* Styles */
}@media only screen
and (max-width : 414px){/* Styles */
}
CSS媒体查询:最大宽度或最大高度相关推荐
- 使用CSS 媒体查询功能满足不同屏幕分辨率要求
http://www.adobe.com/cn/devnet/dreamweaver/articles/dw_html5_pt3.html 这是探索Dreamweaver CS5.5的HTML5和CS ...
- 移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html 简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的 ...
- CSS媒体查询详细解读
一 CSS媒体查询使用的背景: 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器 ...
- 使用 CSS 媒体查询创建响应式网站
简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
- css媒体查询(手机、平板、PC)
List item css媒体查询 PC端按屏幕尺寸整理? 通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度 1024 1280 1366 1440 1680 1920 超小屏幕 手机 (<7 ...
- IOS margin失效问题,以及CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX
CSS媒体查询区分iPhone 6. iPhone8.iPhone8 Plus和iPhoneX /*iPhone6和iPhone8*/ @media only screen and (device-w ...
- css媒体查询的区间_CSS媒体查询
css媒体查询的区间 At-media queries are conditions in your stylesheet. The style rules they contain are appl ...
- media覆盖了css,为什么我的CSS媒体查询被忽略或覆盖?
这让我发疯!我看了一些关于Stackoverflow的问题,发现ID元素的优先级高于类元素(这很高兴知道,但是我感觉这不是我的问题).这是我苦苦挣扎的NAVIGATION菜单.(我使用最大宽度顺便说一 ...
- 响应式开发中合理选定CSS媒体查询分割点
本文响应式开发中合理选定CSS媒体查询分割点翻译自David Gilbertson的The-100%-Correct-Way-To-Do-CSS-breakpoints一文.本文唔看上去有些拗口,不过 ...
最新文章
- 【51CTO学院三周年】写给自己的51cto
- 吐槽express 中间件multer
- Java 中long类型转换成为int类型时可能会出错的地方
- 黑马Java架构师实战训练学习手册
- 重定向地址_JavaWeb - Servlet:重定向和转发,状态管理
- 虚拟网卡实现一个网卡多个地址
- [leetcode周赛]1346. 检查整数及其两倍数是否存在
- php字符串转openssl格式,将OpenSSL生成的RSA公钥转换为OpenSSH格式(PHP)
- Atitit 提升可读性sql subquery udf 子查询 目录 1. 使用udf 和参数@简化join和subquery	1 1.1.1. 子查询分类	1 2. 2.1 按返回结果集分类
- 使用java命令执行函数反弹windows-shell
- 勤哲cad服务器注册机,勤哲CAD服务器
- Sniffer的使用
- 安装科来-csnas_tech_12.0.5.12506_x64
- Pormetheus(普罗米修斯) 采用blackbox_exporter实现监控
- 计算机属性内存处理器不可用,电脑属性显示处理器和安装内存不可用怎么回事...
- 关于动车:动车票假如象飞机票那样卖会如何?
- 如果你恨一个人,就让他去接手别人的代码
- uniapp简单封装的激励广告和插屏广告
- 腾讯多媒体实验室:基于三维卷积神经网络的全参考视频质量评估算法
- tring.Format格式化用法