0

我正在尝试制作响应式网络，但我遇到了一个小问题。每当我想更改一些基于 css 媒体的自定义 css 属性时，它都不会适用。

例如：我正在尝试iron-icon根据当前活动的 CSS 媒体更改大小。我有以下内容：

<iron-icon icon="battery" class="battery"></iron-icon>

和 CSS：

iron-icon.battery {
  --iron-icon-height: 2.3em;
  --iron-icon-width: 2.3em;
}

@media screen and (max-width: 1000px) {
    iron-icon.battery {
      --iron-icon-height: 1.5em;
      --iron-icon-width: 1.5em;
    }
}

当前输出：只选择一种尺寸，忽略另一种。例如，如果我以小于 1000px 宽的分辨率打开窗口，则选择 1.5em。当我打开宽度超过 1000px 的窗口时，选择了 2.3em。但是当我在站点加载时手动更改窗口大小时，不会应用其他@media。

有没有办法在不使用 javascript 的情况下实现这一点（我试图避免设置新类和删除旧类）

4

1 回答 1

2

现在，您的 CSS 似乎正在针对具有“iron-icon”和“battery”类的元素。实际上，您希望使用一类“电池”来定位元素。

只需在 iron-icon.battery 之前删除你的点。

iron-icon.battery {
  --iron-icon-height: 2.3em;
  --iron-icon-width: 2.3em;
}

@media screen and (max-width: 1000px) {
    iron-icon.battery {
      --iron-icon-height: 1.5em;
      --iron-icon-width: 1.5em;
    }
}
于 2017-10-12T12:31:28.030 回答