将媒体查询定义为变量

Question

我有以下带有HTML的简单CSS和media queries代码，也可以在JSfiddle here中找到：

/* Screenwidth as variable */

:root {
  --min-width: 1041px;
}


/* homepage */

@media screen and (min-width:1041px){ 
 
 .homepage {
 height: 500px;
 width: 400px;
 }
 
}
  
  
@media screen and (max-width:1040px){ 
   
 .homepage {
 height: 300px;
 width: 100px;
 } 
   
}


/* faq */

@media screen and (min-width:1041px){ 
 
 .faq {
 height: 800px;
 width: 600px;
 }

}
  
  
@media screen and (max-width:1040px){ 
   
 .faq {
 height: 700px;
 width: 550px;
 } 
   
}

<div class="homepage">
Here goes content of homepage.
</div>

<div class="faq">
Here goes content of faq.
</div>

您可以在代码中看到，我的网站上会有不同的页面，根据访问该网站的设备，它们的大小也应有所不同。 media queries本身已经完美运行。

---

但是，由于我的CSS中将包含许多media queries，因此我可能想将它们更改为不同的大小以进行测试和尝试，因此最好使用min-width和max-width作为CSS variable部分中的:root。

您知道这是否可行，如果可以，我必须如何更改代码才能使其正常工作？

Answer 1

否，您不能在媒体查询中使用css本机变量。

：root，即元素是顶级父级。其他子元素可以从根继承，但是媒体查询不是元素

这不能通过CSS完成。 您可以使用sass之类的预处理器来完成此操作。