Question

我正在努力制作响应式网络，我有一点问题。每当我想基于css媒体更改一些自定义css属性时，它都不适用。

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

<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;
    }
}

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

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

Answer 1

现在看起来你的CSS正在瞄准一个元素＆＃34;铁图标＆＃34;和＆＃34;电池＆＃34;。实际上你想要用一个＆＃34;电池＆＃34;。

这一类来定位元素

在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;
    }
}

使用css媒体更改自定义元素css属性的样式

1 个答案: