Блог

Главная - Вопросы по программированию - Как сделать условие по стилям?

Как сделать условие по стилям?

#javascript #html #css #vue.js #express

Вопрос:

У меня есть свои scss стили для настольной и мобильной версии:

 .categories {
  width: 250px;
  min-height: 100vh;
  background-color: #fff;
  margin-right: 40px;
  min-width: 250px;

  @media only screen and (max-width: 965px) {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    padding: 20px;
  }

Есть ли возможность создать такой mounted метод в vue файле, который будет проверять, использует ли пользователь мобильную или настольную версию?

Как и пример по псевдокоду:

 async mounted() {
   if (@media) {
    // do something
 }
}

Комментарии:

1. Для какой цели вам это понадобится ?

2. У меня есть фильтр с категориями, который находится в мобильной и настольной версиях, и мне нужно убедиться, что эти фильтры по умолчанию не отображаются в мобильной версии (пока пользователь не нажмет на кнопку). Там много кода, поэтому я не могу его показать. Я мог бы просто добавить if условие, но оно не будет работать, потому что, если по умолчанию установлено значение false, оно вообще не будет отображаться в настольной версии.

Ответ №1:

медиа-запросы в css работают в зависимости от размера окна. вы также можете получить тот же размер окна с помощью javascript

 window.innerWidth
window.innerHeight

и используйте эти переменные в случае, если условие выполнит вашу работу.

Если вы хотите,чтобы ваш вид динамически изменялся при изменении размера окна, вам необходимо создать пользовательское событие при изменении размера окна, чтобы перемонтировать компонент при изменении размера окна

 window.resize = <your event handler>

Комментарии:

1. Да, это то, что я искал, спасибо!

Ответ №2:

window.resize может создать проблемы с производительностью, поэтому я рекомендую использовать window.MatchMedia() вместо этого. window.resize срабатывает при каждом изменении размера окна — в каждом пикселе — так что не только тогда, когда изменение размера «завершено».

С помощью этого window.MatchMedia() метода вы определяете точку останова (или массив точек останова). Затем вы добавляете прослушиватель событий, который срабатывает только при достижении точки останова.

В вашем случае это может выглядеть примерно так:

 const mediaQuery = '(max-width: 965px)';
const mediaQueryList = window.matchMedia(mediaQuery);

mediaQueryList.addEventListener('change', event => {
    console.log(window.innerWidth);
  if (event.matches) {
    console.log('The window is now 965px or under');
  } else {
    console.log('The window is now over 965px');
  }
});

Вы можете подробнее прочитать об этом здесь: https://webdevetc.com/blog/matchmedia-events-for-window-resizes/)

Метки: