Как подгружать на сайт файл в зависимости от разрешения экрана?

Question

[MRcracker]

Здравствуйте. На сайте есть мобильное меню. Меню получилось такое, что адаптировать его сложно очень и намного проще сделать просто два меню на сайте: одно для дескопов, а другое мобильное. Вопрос такой как правильно подключить в таком случае два меню к сайту? Можно ли сделать так, чтобы код мобильного меню css и js были в отдельных файлах, которые загружались бы только тогда, когда посетитель заходит с мобильного устройства? Если да, то как такое реализовать? Всем заранее спасибо))))

Answer 1

[Robert-critical-thoughts]

2 меню на сайте - это признак криворукости. Правильный путь - переверстать и сделать меню одним для всех разрешений.

Ваш путь - делаете обертку для вашего меню в стиле ~ lg-menu - и как только у вас подходит к нужному вам разрешению, допустим

@media screen and (max-width: 900px) { lg-menu: dispay: none;}

Следовательно алгоритм мобильного меню вам должен быть понятен,

.mobile-menu \ @media screen and (max-width: 900px) { lg-menu: dispay: flex;}

Нужный вам скрипт подключить\отключить в зависимости от разрешения -

<script>
If (document.body.clientWidth>768){
  document.write('<script src=...>')
}
</script>

Comments

[Дмитрий Христоев]

2 меню на сайте - это признак криворукости.

смешно.

[MRcracker]

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

А делать меню одним для всех разрешений, для чего? Суть сделать сайт удобным для пользователей любых разрешений, что собственно мы как разработчики и делаем, создавая разные меню, а сделать меню одним для всех просто похоже на попытку облегчить себе работу. Есть хорошая идея, а зачем возиться с ней? Сделаем обычный бургер для всех и все, что думать то)))))

А вот решение по подключению может сработать, за него спасибо))

[Robert-critical-thoughts]

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

[MRcracker]

Robert-critical-thoughts, иногда бывает проще не тянуть лишний css в таком случае на десктопы и сделать его только для мобильных устройств. Оптимизация некая)))

[MarvinJan]

MRcracker, такая себе оптимизация. Десяток лишних строк в css погоды не сделают вообще, а вот подгрузка лишнего файла, тем более на мобильных устройствах, для которых оптимизация намного важнее - ударит посильнее.

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