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

我正在尝试使响应式web和我有一个小问题。每当我想改变一些基于CSS媒体的自定义CSS属性，它将不适用。使用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。当我打开宽度超过1000px的窗口时，选择2.3em。但是，当我手动更改窗口的大小，而其他@media不适用。

有没有办法来achiev这一点没有使用JavaScript（我试图避免设置新的类并删除旧）现在好像你的CSS与类“铁图标”瞄准一个元素

来源

2017-10-12 Kuba Šimonovský

我写了一个快速小提琴[这里]（https://jsfiddle.net/f59y7yg7/），我希望复制你的代码。另外，我用'min-width'媒体查询编写了一个版本，我认为这是一种更好的响应式web开发方法，因为您可以逐步增强（“移动优先”方法），而不是不断覆盖CSS缩小比例（可能遇到很多特殊性问题 - 我认为这可能会导致您的问题）。如果这些例子适合你，你能告诉我吗？ –

@TomOakley感谢您的时间。实际上，在我的应用程序中，我无法做到“先移动”。因为我们公司没有时间，所以我只能在很短的时间内为电脑申请。当然现在我们还必须实现移动。重写整个项目是无稽之谈。不幸的是你发布的是正常的CSS属性。在聚合物中有特殊的属性传播到自定义元素，以便您可以对其进行设计。这是问题的核心。当应用媒体查询时，他们只是没有得到更新 –

啊，当然，我认为聚合物标签和CSS是无关紧要的，并且CSS导致了问题。从未使用聚合物，所以我会把它留给你。抱歉。 –

和“电池”。实际上你想用一组“电池”作为目标。

只需在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-12 12:31:28

复印文本时只是输入错误。否则铁图标不会得到任何选定的尺寸... –

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

回答

相关问题