嵌套媒体查询

Posted 2023-03-06

【中文标题】嵌套媒体查询

【英文标题】：Nesting Media Queries

【发布时间】：2013-04-13 09:36:48

【问题描述】：

默认情况下，我想给我的 body 元素一个绿色边框。在支持视网膜显示的设备上，我想先检查尺寸。在 ipad 上，我想给我的身体一个红色边框，在 iPhone 上，我想给它一个蓝色边框。但是像这样是行不通的：

body  border: 1px solid green; 

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)  
   @media (max-width: 768px) and (min-width: 320px) 
      body  border: 1px solid red; 
   
   @media (max-width: 320px) 
      body  border: 1px solid blue; 
   

【问题讨论】：

不确定这里的问题是什么，但如果您想知道您的 CSS 是否经过验证，您可以使用 W3C CSS 验证工具进行检查。我已经尝试使用，但它不喜欢它...您可以在此处访问该工具：jigsaw.w3.org/css-validator

【参考方案1】：

没有。您需要使用 and 运算符并将其编写为两个查询。但是，您可以在 SCSS 中执行此操作，这将编译为 CSS，但它会通过展开它们并使用 and 运算符来组合它们。

这是一个常见的问题，一旦我第一次写 LESS 或 SCSS，我就不想回去写这个长手了。

长手CSS：

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px) and (min-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 768px) and (min-width: 320px) 
  body 
    border: 1px solid red;
  

@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px),
                  (min-resolution: 192dpi) and (max-width: 320px) 
  body 
    border: 1px solid blue;
  

嵌套查询可能有效，但支持因浏览器而异。

【讨论】：

你能提供一个例子吗？我不能在我工作的公司使用任何 CSS 预编译器，至少不能用于当前的项目。

你可以嵌套它们，但是扁平化它们是确保跨浏览器有效性的唯一方法。

事实上看原始逻辑，这可能需要展开为四个规则而不是两个规则才能相同。 SCSS 就简单多了。

我已经更正了查询，以确保它与您的原始查询相同（事实上，我只是为了方便而通过 LESS 运行它。如果您不能为 LESS 提供理由，我会感到惊讶你的项目正好引用了这个例子。我不倾向于使用浏览器编译，或者服务器编译，我只是构建CSS文件。有很多命令行方法或者有允许你的编辑器插件写LESS并吐出CSS。我很难想象任何项目会阻止你这样做。甚至还有在线工具。例如。lesstester.com

【参考方案2】：

2020 年，是的！

实际上，接受的答案已经过时了很长时间。即使在发布时，我什至不确定它在技术上是否正确。 Firefox 从 2012 年开始支持嵌套，Chrome 从 2013 年开始支持嵌套 (source)。

您现在应该期待所有主流浏览器的支持，当然除了通常的 IE。

您可以使用以下 html 和 CSS 对其进行测试。只需在浏览器中打开开发面板并更改视口宽度即可。

<div id="abc">Example text</div>

#abc 
  background: green;

/* width < 801px */
@media (max-width: 800px) 
  #abc#abc 
    background: red;
  
  /* 500px < width < 801px */
  @media (min-width: 500px) 
    #abc#abc#abc 
      background: yellow;
    
  

或者，查看this codepen。