IIIu6ko
@IIIu6ko

Как сделать функцию для мeдиа-запросов на js?

Есть вот такой код с медиа-запросами для js.
const mqList = [
  window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
  window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
  window.matchMedia('(min-width: 992px)'),
];

function mqIf() {
  if (mqList[0].matches) {
    document.querySelector('body').style.background = 'red';
  }

  if (mqList[1].matches) {
    document.querySelector('body').style.background = 'white';
  }

  if (mqList[2].matches) {
    document.querySelector('body').style.background = 'green';
  }
}

mqIf();

for (let i = 0; i < mqList.length; i += 1) {
  mqList[i].addEventListener('change', mqIf);
}


Подкиньте варианты/идеи как из этого собрать функцию, чтобы я смог её импортировать и применять в разных файлах.
Массив медиа-запросов я думаю можно оставить внутри функции, если что подправлю, но он может варьироваться от 2 до бесконечности.
Самое главное чтобы можно было внутрь функции передать код, который попадёт в нужный if.
  • Вопрос задан
  • 131 просмотр
Решения вопроса 2
MagnusDidNotBetray
@MagnusDidNotBetray
Самый елеустремленный человек
Как пример , но выглядит как-то не очень, может кто-то предложит что-то получше.
Ответ написан
IIIu6ko
@IIIu6ko Автор вопроса
Переработал/оптимизировал функцию, в итоге получилось такое:
const media = {
  queryList: {
    mobile: window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
    tablet: window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
    desktop: window.matchMedia('(min-width: 992px)'),
  },
  queryIf(func, type) {
    if (this.queryList[type].matches) func();
  },
  query(type, func) {
    this.queryIf(func, type);
    this.queryList.mobile.addEventListener('change', () => this.queryIf(func, type));
  },
};

export default media;

import media from '/path';

media.query('mobile', () => document.querySelector('body').style.background = 'red');
media.query('tablet', () => document.querySelector('body').style.background = 'green');
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Steppp
export const Media = () => {
  const mqList = [
    window.matchMedia('(min-width: 0px) and (max-width: 768px)'),
    window.matchMedia('(min-width: 768px) and (max-width: 992px)'),
    window.matchMedia('(min-width: 992px)'),
  ];

  function mqIf() {
    if (mqList[0].matches) {
      document.querySelector('body').style.background = 'red';
    }

    if (mqList[1].matches) {
      document.querySelector('body').style.background = 'white';
    }

    if (mqList[2].matches) {
      document.querySelector('body').style.background = 'green';
   }
  }

  mqIf();

  for (let i = 0; i < mqList.length; i += 1) {
    mqList[i].addEventListener('change', mqIf);
  }
};


import media from './file-name.js';
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы