Изменение или добавление имен классов в семантическом интерфейсе при изменении размера окна с помощью медиа-запросов

Question

Есть ли способ изменить класс контейнера сетки в семантическом интерфейсе пользователя с помощью медиазапросов или решение заключается в написании собственного Javascript, который добавляет или удаляет классы в ваш HTML?

Я понимаю, что яЯ не совсем правильно сформулировал вопрос, поэтому я собираюсь обновить его, чтобы отразить это.Это было именно о медиа-запросов против JavaScript в отношении семантического интерфейса.

Моя проблема заключается в следующем: допустим, у меня есть стекируемый контейнер сетки с двумя столбцами, которые имеют классы .four.wide.column и .twelve.wide.column.По умолчанию, когда размер окна браузера составляет 1000 пикселей, текст внутри столбцов выравнивается по левому краю.Однако я хотел бы выровнять текст по центру внутри столбцов, когда размер окна изменяется до меньшего размера для мобильных устройств - 767 пикселей.

Сначала я подумал о выравнивании текста внутри столбцов в медиа-запросах, однакоЯ бы сказал, что это противоречит цели Semantic UI, потому что с этим решением имена классов не будут выглядеть или вести себя так, как описано.Обычно выровненный по левому краю столбец теперь выровнен по центру, но класс не называется выровненным по центру.Что произойдет, если класс был выровнен по центру и теперь выровнен по левому краю, но его имя совпадает?

Тогда я подумал, можно ли добавлять и удалять классы с помощью медиазапросов, но это кажется невозможным,Единственное решение, которое я обнаружил и которое поддерживает семантический пользовательский интерфейс, - это использование JavaScript для добавления и удаления классов, однако я хотел избежать использования JavaScript в качестве решения.

Answer 1

Это зависит от того, что именно вы хотите вызвать изменение выравнивания текста.Если вы хотите, чтобы выравнивание изменилось при определенной ширине области просмотра, я бы рекомендовал использовать запросы css @media вместо прослушивателя изменения размера.Для изменения размера окна вы также захотите отменить или ограничить событие изменения размера для повышения производительности.В зависимости от того, как вы это сделаете, вы можете испытать мгновенную вспышку неожиданного выравнивания.Вам не нужно делать это с медиа-запросом, и изменение будет немедленным.

.ui.grid .column {
  text-align: left;
}

@media only screen and (max-width: 600px) {
  .ui.grid .column {
    text-align: right;
  }
}