レスポンシブ Web を作成しようとしていますが、少し問題があります。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;
}
}
現在の出力: 1 つのサイズのみが選択され、他のサイズは無視されます。たとえば、幅 1000px 未満の解像度でウィンドウを開くと、1.5em が選択されます。幅が 1000px を超えるウィンドウを開くと、2.3em が選択されます。しかし、サイトの読み込み中にウィンドウのサイズを手動で変更すると、他の @media が適用されません。
JavaScriptを使用せずにこれを達成する方法はありますか(新しいクラスの設定と古いクラスの削除を回避しようとしています)