CSS本机变量在媒体查询中不起作用
我正在尝试在媒体查询中使用CSS变量，但它不起作用。
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
问题答案：
从规格，
该var()函数可以代替元素上任何属性中值的任何部分。该var()函数不能用作属性名称，选择器或除属性值之外的其他任何东西。（这样做通常会产生无效的语法，否则将产生其含义与变量无关的值。）
所以不，您不能在媒体查询中使用它。
这是有道理的。因为您可以将--mobile-breakpoint例如设置为:root，即<html>元素，然后从那里继承其他元素。但是媒体查询不是元素，它也不继承自<html>，因此它无法工作。
这不是CSS变量要完成的任务。您可以改用CSS预处理器。
-
问题内容： 我有一个响应迅速的网页。它利用媒体查询。 但是在iframe中加载的同一页面无法正常工作。 例如，考虑到我的网页，当屏幕宽度小于640px时，我将背景色设置为红色。 因此，当我在新标签页中加载该窗口并使浏览器宽度小于640px时，背景颜色变为红色。 但是，在以320 * 480尺寸的iframe加载时，同一窗口没有红色的背景色。 如何使媒体查询在iframe中工作？ 问题答案： 以这种
-
问题内容： 我正在使用iPad专用的网站。为了使我的网站在视网膜显示屏iPad和旧版本的iPad上都能正常工作，我想在媒体查询中的LESS CSS中设置一个变量，例如： 因此，当您以像素为单位设置任何内容时，您都可以 但是我收到一个编译错误，指出未定义@ratio。是否有解决方法才能使其正常工作？谢谢。 问题答案： 很好，但这是不可能做到的。 LESS将您的媒体查询编译为实际的媒体查询，因此在编译
-
我在wordpress的论文框架中使用下面给出的媒体查询。但它不起作用。我也从这些答案中得到了帮助，但仍然不起作用。 响应型网站可在桌面上运行，但不能在移动设备上运行 响应媒体查询不工作 当我在此处检查此查询时http://www.responsinator.com/?url=http://www.lvticketattorney.com/ 它正在工作。但当我在移动设备上检查它时，它不工作。 媒体
-
主要内容：1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及，用户不再只是通过传统的电脑系来浏览 Web 内容，越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容，为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一，所谓媒体查询指的就是根据不同的媒体类型（设备类型）和条件来区分各种设备（例如：电脑、手机、平板电脑、盲文设备等），并为它们分别定义不
-
问题内容： 我非常热衷于在CSS中使用媒体查询，但是我对如何使用它感到困惑。我有立场 我的查询要求是 如果屏幕宽度是100到480，那么会出现不同的样式， 如果屏幕宽度从481到600，那么会出现不同的样式， 如果屏幕宽度为601到800，那么会出现不同的样式， 如果屏幕宽度为801，则默认CSS应该有效。 问题答案：
-
问题内容： iPhone 5的屏幕更长，无法捕捉到我网站的移动视图。iPhone 5新增了哪些响应式设计查询，可以与现有iPhone查询结合使用吗？ 我当前的媒体查询是这样的： 问题答案： 另一个有用的媒体功能是。 请注意， iPhone 5没有16：9的宽高比 。实际上是40:71。 iPhone <5： iphone 5： iPhone 6： iPhone 6 Plus： iPad：