3 回答

• 230

  使用逗号指定两个（或更多）不同的规则：

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

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

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

  回复于 2024-04-29T14:19:05+08:00
• 785

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

  The quick answer.

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

  The long answer.

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

  ---

  媒体查询

  Media queries essentially are used in web design to create device- or situation-specific browsing experiences; this is done using the @media declaration within a page's CSS. 这可用于在很多情况下以不同方式显示网页：无论您是在具有不同宽高比的平板电脑还是电视上，无论您的设备是彩色屏幕还是黑白屏幕，或者最常见的是，当用户改变浏览器的大小或在具有不同屏幕尺寸的浏览设备之间切换时（一般来说，这样的设计被称为Responsive Web Design）

  逻辑运算符

  在针对这些情况进行设计时，似乎有 four Logical Operators 可用于在定位各种设备或viewport尺寸时需要更复杂的需求组合 .

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

  1. AND (and keyword)

  在样式规则生效之前需要 all conditions specified must be met .

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

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

  • 媒体类型为'screen'和

  • 视口宽度至少为700px

  • 屏幕方向目前是横向的 .

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

  2. OR (Comma-separated lists)

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

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

  指定的样式 rules will go into effect once any one media query evaluates as true ：

  • 媒体类型为'handheld'或

  • 视口宽度至少为650像素或

  • 屏幕方向目前是横向的 .

  3. NOT (not keyword)

  not关键字可以是 used to negate a single media query （而不是完整的媒体规则 - 意味着它只会否定一组逗号之间的条目，而不是@media声明之后的完整媒体规则） .

  同样，note表示非关键字否定媒体查询，它不能用于否定媒体查询中的单个要素查询 . *

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

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

  • 媒体类型和最小分辨率都不符合他们的要求（分别为'screen'和'300dpi'）或

  • 视口宽度至少为800像素 .

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

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

  4. ONLY (only keyword)

  据我了解，唯一的关键字是 used to prevent older browsers from misinterpreting newer media queries 作为较早使用的较窄媒体类型 . 如果使用得当，旧的/不兼容的浏览器应该完全忽略样式 .

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

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

  FOR MORE INFO

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

  ---

  了解媒体查询术语

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

  media rule （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)

  media query 是一组要素查询 . 它们可以像一个特征查询一样简单，也可以使用和关键字形成更复杂的查询 . 媒体查询可以用逗号分隔以形成更复杂的媒体规则（请参阅上面的或关键字） .

  screen （注意：此处仅使用一个要素查询 . ）

  only screen

  only screen and (max-resolution:800dpi)

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

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

  feature query 是媒体规则中最基本的部分，仅涉及给定功能及其在给定浏览情境中的状态 .

  screen

  (min-width: 650px)

  (orientation: landscape)

  (device-aspect-ratio: 16/9)

  ---

  代码摘要和信息来自：

  CSS media queries by Mozilla Contributors（根据CC-BY-SA 2.5许可） . 一些代码样本使用了一些微小的改动（希望）增加解释的清晰度 .

  回复于 2024-04-29T14:19:05+08:00
• 0

  在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 */
  }
  

  回复于 2024-04-29T14:19:05+08:00