IE 11 中带有媒体查询的嵌套 CSS 自定义属性（CSS 变量）？答案

【问题标题】：Nested CSS Custom Properties (CSS Variables) with media-queries in IE 11?IE 11 中带有媒体查询的嵌套 CSS 自定义属性（CSS 变量）？
【发布时间】：2019-10-22 17:33:51
【问题描述】：

我的设置：

// Set CSS Vars
:root {
  // These variables control everything
  /* set base values */
  --text-base-size: 1.125em;
  /* This is for smaller text (sm and down) */
  --text-scale-ratio-down: 1.15;
  /* This is for larger text (md and up) */
  --text-scale-ratio-up: 1.18;

  // Calculate sizes
  --text-xxs: calc(((1em / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down)) / var(--text-scale-ratio-down));
  --text-xs: calc(var(--text-xxs) * var(--text-scale-ratio-down));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio-down));
  --text-md: calc(1em * var(--text-scale-ratio-up));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio-up));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio-up));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio-up));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio-up));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio-up));
}

// Responsive
// Override variables for recalculation on desktops
@include mq(xxl){
    :root {
    /* set base values */
    --text-base-size: 1.313em;
    /* This is for smaller text (sm and down) */
    --text-scale-ratio-down: 1.18;
    /* This is for larger text (md and up) */
    --text-scale-ratio-up: 1.22;
  }
}

body {
  // Set base font size
  font-size: var(--text-base-size);
}

// Set font-size
h1 {
  font-size: var(--text-xxxl);
}

使用postcss-preset-env 编译后，在IE 11中看起来像这样：

h1 {
  font-size: 1.93878em;
font-size:var(--text-xxxl);");
}

IE 11 不理解自定义属性并使用值 1.93878em。该值由postcss-preset-env静态计算得出。

这在移动设备上是正确的！在较大的桌面上，CSS 变量由媒体查询调整，文本显示得更大。

这在此处不起作用，因为 IE 11 无法识别媒体查询中 CSS 变量的更新。也许它不起作用，因为 CSS 变量是嵌套的？

IE 11 的解决方案是什么样的？

【问题讨论】：

IE 不支持它们：caniuse.com/#feat=css-variables
这对我来说很清楚......这就是为什么有 postCSS。
您能否发布一个可以在 Internet Explorer 中产生问题的示例？我们将尝试在 IE 中测试代码以检查结果。它有助于更好地理解问题。
我不知道怎么...倒是postCSS要写额外的CSS，考虑到media-query中CSS变量的更新。
这对我们来说也很困难，因为仅使用上面发布的代码我们无法正确理解问题。

标签： css gulp internet-explorer-11 postcss css-variables

【解决方案1】：

你可以使用 polyfill，它帮助了我，获得 CDN https://github.com/nuxodin/ie11CustomProperties

【讨论】：

欢迎来到 Stack Overflow。请阅读帮助区域中关于编写好答案的部分。仅链接的答案容易受到这些链接死亡的影响，即使链接断开，答案也应该有用。