Как отобразить нужный контент без медиа-запросов?

Question

[Hikky]

Всем привет! В верстке для отображения нужного контента на разных устройствах используют медиа-запросы. Например, чтобы на телефонах скрыть обычное меню и показать бургер. Возможно ли обойтись без этих запросов, и использовать вместо этого JS? Как реализовать подобное?

Answer 1

[Дмитрий Беляев]

Можно так же медиа запросами:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
Можно даже подписаться на изменение состояния по медиа запросу:
https://developer.mozilla.org/en-US/docs/Web/API/M...

Answer 2

[Вадим]

Проверять размер окна браузера:
window.innerWidth

Сравнивать с нужным значением.
Например мобильные: window.innerWidth < 768
И если сравнение истинно, то менять класс элемента, или напрямую свойство display.
Например:

if(window.innerWidth < 768) {
  var elem = document.querySelector('.hamburger')
  elem.style.display = 'block'
}

Но я настоятельно рекомендую всё же делать это с помощью css.

Comments

[Hikky]

Примерно по такой схеме сейчас и делал. Как правильно вызывать функцию? Потому что у меня сейчас скрипт срабатывает не верно и заметно его выполнение.
P.S: делаю с учетом того, что размер меню может быть больше контейнера, и хочу его скрывать именно в тот момент, когда оно уже не вмещается. Можно ли обойтись без JS (было бы круто)?

[Вадим]

Hikky, как у Вас сейчас срабатывает мне не ведомо. Если можете сделать демку на Jsfiddle, например, то было бы хорошо.

По поводу размеров - находите ширину экрана, при которой перестаёт помещаться и скрываете через css media. Если элементы меню динамические и наполняются из админки, то тогда только Js.
И тогда проверять надо не размер окна браузера, а количество доступного пространства у родительского контейнера.

[Вадим]

Hikky, или можно отслеживать какой-то другой атрибут меню. Например, что он стал слишком высоким - значит перенёсся на новую строку и тд.
Ну и нужно так же делать эту проверку при изменении окна браузера. То есть событие resize.