如何在 <source media=""> 中使用 CSS 变量？答案

【问题标题】：How can I use CSS Variables in <source media="">?如何在 <source media=""> 中使用 CSS 变量？
【发布时间】：2019-07-08 11:54:07
【问题描述】：

我想在我的 HTML 中使用我的 Bootstrap 断点。我在 :root 中定义了它们。

:root {
    --mq-xs: some value;
    --mq-sm: some value;
    --mq-md: some value;
    --mq-lg: some value;
}

我需要使用带有多个子元素的元素。我知道您可以在 style="" 属性中使用 CSS 变量。我想为那些<source> 元素添加一个media="" 属性，并希望我能做到以下几点。

    <picture>
        <source srcset="..." media="(min-width: var(--mq-lg))" />
        <source srcset="..." media="(min-width: var(--mq-md))" />
        <source srcset="..." media="(min-width: var(--mq-sm))" />
        <img class="img-responsive" alt="" src="..." />
    </picture>

什么都没有发生。

还有其他方法可以做这样的事情吗？我知道你可以通过 JavaScript 传递 CSS 自定义属性，但这似乎有点太多了。

【问题讨论】：

我认为 CSS 变量不能与 HTML 属性一起使用。
Media 属性不是 CSS，您可以在 style 属性中使用它们
@weegee 您使用的是内联样式，所以它是 CSS 而不是 HTML 属性
@weegee 这不起作用：jsfiddle.net/f6u3w4r2/1（这里是 HTML 属性）
@TemaniAfif 是的，这就是我的意思。我想念你的评论。看起来OP必须使用javascript

标签： css css-variables

【解决方案1】：

你不能只在样式属性 css 变量中调用 dom 中的 css 变量，只是让你的 css 文件更容易编写

对于您的问题，您可以使用 javascript，因为我们在这里只使用字符串示例

我建议你暂时忘记 css 变量，因为旧浏览器无法理解它们，最好使用 sass 或更少的预处理来做到这一点。

所以如果你需要动态管理你的 var 你不能使用 css 文件你需要在这里使用 javascript 一个小例子。

<picture>
        <source class="sources" srcset="..." media="(min-width: var(--mq-lg))" />
        <source class="sources" srcset="..." media="(min-width: var(--mq-md))" />
        <source class="sources" srcset="..." media="(min-width: var(--mq-sm))" />
        <img class="img-responsive" alt="" src="..." />
 </picture>
<script>

var cssVar = {
  xs : 'same value to css var',
  sm : 'same value to css var',
  md : 'same value to css var',
  lg : 'same value to css var'
}

var sources = document.getElementsByClassName('sources')

sources[0].setAttribute('media', cssVar.lg);
sources[1].setAttribute('media', cssVar.md);
sources[2].setAttribute('media', cssVar.sm);

<script/>

【讨论】：