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

我正在尝试建立一个响应性强的网络，我有一个小问题。每当我想更改一些基于css媒体的自定义css属性时，它都不会应用

例如：我试图根据当前活动的CSS媒体更改

铁图标的大小。我有以下建议：


和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。但当我在站点老化时手动更改窗口大小时，其他@媒体不会被应用

有没有一种方法不使用javascript就可以实现这一点（我试图避免设置新类和删除旧类）
现在，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;
    }
}

现在看起来你的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;
    }
}

那只是复制文本时的打字错误。否则铁图标将无法获得任何选定的大小…这只是复制文本时的打字错误。否则iron icon将无法获得任何选定的大小…我已经编写了一个快速提琴，希望能复制您的代码。此外，我还使用
minwidth
媒体查询编写了一个版本，这（我相信）是一种更好的开发响应web的方法，因为您可以逐步增强（“移动优先”方法），而不是在缩小规模时不断覆盖CSS（可能会遇到很多特殊性问题-我认为这可能是造成您问题的原因）。您能告诉我这些示例是否适用于您吗？@TomOakley谢谢您的时间。实际上，在我的应用程序中，我无法做到“移动第一”。因为我们没有时间在公司工作，我不得不在很短的时间内为计算机制作应用程序。当然，现在我们还必须实现移动。重写整个项目是胡说八道。不幸的是，你发布的是普通CSS属性。在聚合物中，特殊属性会传播到自定义元素，以便你可以进行样式设置他们。这是问题的核心。当媒体查询被应用时，他们不会得到更新。当然，我认为聚合物标签和CSS是无关紧要的，CSS是导致问题的原因。从未使用过聚合物，所以我将把这留给你。对不起。我已经写了一个快速小提琴，希望复制你的代码。我还编写了一个版本u使用
min-width
媒体查询，这（我认为）是一种更好的开发响应性web的方法，因为您可以逐步增强（“移动优先”方法），而不是在缩小规模时不断覆盖CSS（可能会遇到许多特殊性问题，我认为这可能会导致您的问题）.你能告诉我这些例子对你有用吗？@TomOakley谢谢你的时间。实际上，在我的应用程序中，我无法做到“移动第一”。因为我们没有时间在公司工作，我不得不在很短的时间内为计算机制作应用程序。当然，现在我们还必须实现移动。重写整个项目是胡说八道。不幸的是，你发布的是普通CSS属性。在聚合物中，特殊属性会传播到自定义元素，以便你可以进行样式设置它们。这是问题的核心。当媒体查询被应用时，它们不会得到更新。当然，我认为聚合物标签和CSS是无关紧要的，CSS是导致问题的原因。从未使用过聚合物，所以我将留给你。抱歉。