Элемент app-grid (вспомогательный класс) в Polymer позволяет создавать адаптивный макет сетки. Данный пример Polymer создает макет с тремя списками элементы расположены горизонтально рядом друг с другом.
Чтобы он быстро менял сетку с 3 столбцов на 1 на небольших экранах, необходимо объявить точки останова. В документации говорится об определении пользовательских свойств внутри правила @media. (ссылка выше)
Я не могу заставить правила СМИ внести изменения. Я нашел похожие вопросы о правиле @media в Polymer, но в ответах всегда указывалось, что нужно использовать железный-медиа-запрос. Теперь, когда в документации Polymer упоминается @media, я считаю, что должен быть способ сделать это.
Я пытался использовать его так, но не смог заставить его работать:
<style include="app-grid-style">
:host {
--app-grid-columns: 3;
--app-grid-item-height: 200px;
--app-grid-gutter: 20px;
}
@media (max-width: 600px) {
:host {
--app-grid-columns: 1;
}
}
</style>
