Изменить класс начальной загрузки, если устройство поворачивается - PullRequest
Новая
       12

Изменить класс начальной загрузки, если устройство поворачивается

0 голосов
/ 05 ноября 2018

Можно ли определить, вращается ли устройство горизонтально или вертикально, и соответственно изменить класс начальной загрузки?

Вот так выглядит устройство, если устройство поворачивается вертикально:

vertically rotated

Все выглядит отлично, используется класс начальной загрузки col-xs-12.

Но если пользователь поворачивает устройство по горизонтали, значит, много пробелов:

horizontally rotated

Я хочу использовать этот пробел и изменить в этом случае col-xs-12 на col-xs-6, чтобы 2 контейнера отображались рядом.

Возможно ли это с начальной загрузкой, или я должен использовать javascript?

1 Ответ

0 голосов
/ 05 ноября 2018

Вы не должны изменять классы, вы должны изменить выбранный класс в зависимости от ориентации. 

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
  .classYouWantToChange { 
     background: blue;
  }
}
/* landscape */
@media screen and (orientation:landscape) {
   /* landscape-specific styles */
  .classYouWantToChange { 
     background: black;
  }
}

Как видно из кода выше, мы перезаписываем класс classYouWantToChange на основе ориентации устройства

...