极客观点
项目管理
HarmonyOS
我正在尝试在媒体查询中使用 CSS 变量，但它不起作用。
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
原文由 user7122183 发布，翻译遵循 CC BY-SA 4.0 许可协议
CSS本机变量在媒体查询中不起作用
新手上路，请多包涵
阅读 1.4k
正如 Oriol 所回答 的那样， CSS 变量级别 1 的 var() 目前不能用于媒体查询。然而，最近的发展将解决这个问题。 一旦 CSS 环境变量模块级别 1 被标准化和实施，我们将能够在所有现代浏览器的媒体查询中使用 env() 变量。
CSS 工作组 (CSSWG) 编纂了 env() 新标准（目前处于草案阶段）： CSS 环境变量模块级别 1 （请参阅 此 GitHub 评论 和 此评论 以获取更多信息）。草案将媒体查询中的变量作为一个明确的用例：
因为环境变量不依赖于从特定元素提取的任何值，所以它们可以用在没有明显元素可提取的地方，例如
@media规则，其中var()函数无效。
如果您阅读规范并有疑虑，或者如果您想表达您对媒体查询用例的支持，您可以在 问题#2627 、 问题#3578 或 任何标有“css”的 CSS GitHub 问题 中这样做 -env-1” 。
GitHub 问题 #2627 和 GitHub 问题 #3578 专门讨论媒体查询中的自定义环境变量。
来自 2017-11-09 的原始答案：最近， CSS 工作组决定 CSS Variables Level 2 将支持使用 env() 的用户定义环境变量，他们将尝试使它们在媒体查询中有效。 在 Apple 首次提出标准用户代理属性 后，该小组在 2017 年 9 月正式发布 iPhone X 之前不久解决了这个问题（另请参阅 WebKit：Timothy Horton 的“为 iPhone X 设计网站” ）。其他浏览器代表随后同意它们通常可用于许多设备，例如电视显示器和带有出血边缘的墨水打印。 （ env() 过去称为 constant() ，但现在已弃用。您可能仍会看到引用旧名称的文章，例如 Peter-Paul Koch 的这篇文章。）几周后， Mozilla 的 Cameron McCormack 意识到 这些环境变量可用于媒体查询，而 Google 的 Tab Atkins, Jr. 随后意识到 用户定义的环境变量将特别有用，因为全局的、不可覆盖的根变量可用在媒体查询中。现在， Apple 的 Dean “Dino” Jackson 将与 Atkins 一起编辑 Level 2。
您可以在 w3c/csswg-drafts GitHub 问题 #1693 中订阅有关此事的更新（有关特别相关的历史详细信息，请展开 CSSWG 会议机器人决议 中嵌入的会议日志并搜索“MQ”，它代表“媒体”查询”）。
原文由 jschoi 发布，翻译遵循 CC BY-SA 4.0 许可协议
撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？
:first-child 选中了什么如题，在学习:first-child伪类的时候，我使用如下语法，但是产生的结果在预料之外。codepen链接html {代码...} css {代码...} 按照:first-child语法，body :first-child选中的应该是body的第一个子元素，也就是 {代码...} 结果选中了这个元素 {代码...} 网上搜索无果，所以来这里提问了，body :f...2 回答913 阅读✓ 已解决
CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？
参考使用：antd的Tag我做了2行的Tag： {代码...} 现在的需求是，如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？3 回答816 阅读✓ 已解决
如何实现类似豆包的AI改写框跟随内容滚动效果？
豆包这种是怎么实现的，ai改写这个框是跟随内容滚动的，但是ai改写这个框是在body下与根节点平级的，想了半天，看他页面上代码也看不出来，求助4 回答1.2k 阅读✓ 已解决
如何在CSS中实现滚动条不溢出圆角框？
请问css如何实现滚动条在外侧滚动框的下一层？我最近在设计一个小插件，里面有一个换肤的小弹窗，小弹窗里还有一个小框，在这个小框里加了滚动条，小框为了美化做了border-radius，然后为这个框自定义了::webkit-scrollbar伪类，但是我发现这个滚动条会溢出这个框，很不好看，下图为现在的效果：我想做到上下的滚动条可...2 回答1.3k 阅读✓ 已解决
请问，是否可以设定Table的宽度，或者不让其超过父容器呢？
我写了一个可编辑Cell的List： {代码...} 使用方式： {代码...} 现在的问题是，比如：内容过长会直接冲出父容器：请问，是否可以设定Table的宽度，或者不让其超过父容器呢？2 回答1.1k 阅读✓ 已解决
如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？
当同时设置scroll.x='max-content'和scroll.y的值，并将表头的文字内容设置到比列内容长且列未设置固定宽度时，表头会换行收缩。2 回答2.6k 阅读
表数据复制一条添加到数据库，前端跳转到数据所在的page页，滚动到对应行并添加高亮样式异常？
现在的情况是点击菜单切换表数据后点击copyCell方法复制数据，然后执行getData获取新的表数据。当我第一次点击复制，跳转到了对应的page页，高亮的class名称在，高亮效果不显示，当我第二次点击复制，这个高亮效果显示。第三次点击复制，高亮不显示，第四次显示，以此类推，这种情况该怎么解决？1 回答1.1k 阅读✓ 已解决
本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。
宣传栏
从 规格，
所以不，你不能在媒体查询中使用它。
这是有道理的。因为您可以设置
--mobile-breakpoint例如为:root，即<html>元素，并从那里继承到其他元素。但是媒体查询不是一个元素，它不继承自<html>，所以它不能工作。这不是 CSS 变量试图完成的任务。您可以改用 CSS 预处理器。