当前位置: 首页 > 面试题库 >

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

姜德容
2023-03-14
问题内容

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

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

/* 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/CSS/Media_queries/

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



 类似资料:
  • 我已经尝试了几个小时来解决这个问题,我正在努力,不管我做什么,它拒绝在我添加max-width或min-width的瞬间调用媒体标记中的CSS。为了测试,我让media标记使主体变红,并将min-width降低到可笑的低。什么都没发生。如果我留下屏幕标记而不留下任何其他东西,它就会调用它 CSS: HTML: 请原谅代码的绝对混乱,但我还没来得及清理这个问题,就在我对这个问题失去理智之前。

  • 我试图根据浏览器的最小高度和最小宽度在我的页面上更改CSS,所以我使用这个: 但出于某种原因,这不起作用。我可以检查“最小高度”和“最大宽度”(反之亦然),或者同时检查“最大高度”和“最大宽度”,但检查“最小高度”和“最大宽度”似乎都不起作用。 我应该详细说明这一点:我希望浏览器在最小高度或最小宽度变为真时起作用。仅当两个条件均为真时,使用and运算符才有效。 我做错什么了吗?

  • 问题内容: 我正在考虑响应式网页设计和“移动优先”方法来重新设计我的博客-简而言之,我正在尝试使用最小宽度来避免任何形式的复制或CSS。 我的问题是,当我确实需要覆盖CSS值时,较低的最小宽度优先。例: 我希望当我在600px及更高的分辨率下会得到2.2em h2,而我会得到1.7em。这没有道理! 我可以继续使用最小宽度并在不使用更强大的选择器或最大宽度的情况下有效地覆盖更高分辨率的声明吗? 问

  • 问题内容: 我对媒体查询世界还很陌生,很明显,宽度和设备宽度之间的差异让我遗漏了一些基本知识,除了它们明显的定位能力之外。 我想同时针对具有相同断点的常规计算机和设备,因此我只将所有最小和最大宽度查询都复制到了最小设备和最大设备宽度查询中。无论出于何种原因,当我添加- device对应项时,常规计算机对CSS的解释都大不相同,因此我不确定自己做错了什么。 您可以在这里看到效果(这是应该的样子) 此

  • 问题内容: 是否可以定义一个最大列数的网格,但是当屏幕宽度改变时允许元素包装到新行上? 我有隐式类,允许行包装到新行上,但是没有最大列数。 这是使用弹性盒的一种方法的代码笔 CSS: 另一种方法是使用网格 我想要一个相当通用的解决方案,没有Java脚本或媒体查询,我想实现的目标是否可能? 问题答案: 使用flexbox,您可以简单地将a设置为容器,因为您的元素具有固定的宽度: 唯一的缺点是您需要知

  • 问题内容: 如何为宽度创建CSS规则 默认使用100%宽度 如果100%的宽度超过了某个像素的宽度(例如512像素),则该宽度将被限制为该像素的宽度 我不确定宽度和最大宽度关系,也不知道如何支持calc()或可以表达这一点。这需要与最新的WebKit浏览器和Firefox 4配合使用。不需要IE8等支持。 问题答案: 这实际上是的预期用途。如果元素的计算值(实际值)超过,它将被限制为最大值,而不是