Изменение стилей свойств css пользовательских элементов с помощью css media

Question

Я пытаюсь сделать отзывчивый веб, и у меня есть небольшая проблема. Всякий раз, когда я хочу изменить какое-либо пользовательское свойство 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 размер, а другой игнорируется. Например, если я открываю окно с разрешением менее 1000 пикселей в ширину, выбирается 1.5em. Когда я открываю окно шириной более 1000 пикселей, выбирается 2.3em. Но когда я вручную изменяю размер окна, пока сайт загружен, другие @media не применяются.

Есть ли способ достичь этого без использования JavaScript (я пытаюсь избежать установки нового класса и удаления старого)

Answer 1

Прямо сейчас кажется, что ваш 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;
    }
}