Как изменить код HTML в зависимости от ширины экрана?

Question

[bxspb]

Привет, можете показать пример варианта решения (полагаю на js и видимо с ajax) задачи:
Обрамить блок тегами при определенной ширине экрана.

Пример:
Ширина экрана > 1200px
<div id="content"></div>
Ширина экрана < 1200px

<div id="mobile">
     <div id="cotnent"></div>
</div>

Спасибо.

Comments

[poniyur]

это конечно можно, но зачем? я уверен, что вам нужно сделать по-другому (css-медиазапросы например)

[Andrew]

"css media queries"
можно конечно шаманить на js'е, но зачем?

[bxspb]

Вроде подробно расписала же, ну уж css'ом я бы и сама справилась.. не ну может чего то не догоняю, ну подскажите решение на стилях, пример есть.

[bxspb]

poniyur, ваша уверенность внушает доверие, не подскажете ли решение.
Вот есть блок фильтров, формирует больше 1000 записей, (дважды его выводить для мобилок и десктопов на странице не вариант, надо формировать один раз) далее нужно на мобилках прятать его в канвас фреймворка, для этого нужно вложить его в два div'а.

<div id="offcanvas-nav-primary" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar uk-flex uk-flex-column">
             [[+filters]]
</div>
</div>

[poniyur]

bxspb пример медиазапроса
При ширине окна браузера меньше чем 1200px применятся стили, которые я указал, например, элемент с id "content" примет display: none (исчезнет с экрана)
Вам нужно будет лишь прописать свои стили

@media screen and (max-width: 1200px) {
  #content {
    display: none;
  }
}

[bxspb]

poniyur, вы не внимательно прочитали вопрос, стили применятся ко всем вложенным тегам. Мне не нужно скрывать элемент, мне нужно при определенной ширине экрана вкладывать элемент в другой.

[poniyur]

bxspb, а не, вопрос я нормально прочитал.
Я просто не понял, зачем это.
Если вам нужно в зависимости от ширины экрана менять стили элемента, то используйте медиазапросы.
Ради этого менять вёрстку на стороне клиента через js - не очень правильно (хотя бывает, что без этого никак).

[poniyur]

bxspb, что вам даст вкладывание одного элемента в другой, может и правда без вкладывания никак, расскажите

[poniyur]

Можете вложить блок фильтров в 2 div'а сразу? Это как-то мешает десктопной версии?

[bxspb]

poniyur, да, эти два дива формируют канвас, js обработчик повешан на их id, соответственно в десктопоной версии блок выступает в роли части верстки страницы, в мобильной он вкладывается в родительский канвас контейнер.

[SH_Sergey]

Правильным решением будет определить разрешение (тут вам уже показали как). Далее при мобильном разрешении

myFilter = UIkit.offcanvas(element, options);
(инициализации, из оф доки по uikit)

При изменении разрешения на декстоп

myFilter.$destroy()
(удаляем)

[SH_Sergey]

Опять же, если изучить поведение, вероятнее всего uikit через js управляет стилями (добавляет удаляет как классы так и инлайн стили), то есть куда менее... дешёвый костыль (чем оборачиваете в дивы) - это обнуление этих стилей для декстопа, но это только если там не будет в инлайн таких вещей как position: fixed и т. п.

Answer 1

[Tim]

$(window).resize(function(e) {
  let width = e.target.innerWidth
    if(width < 1200) {
      //меняем элементы в html
   }
});

Comments

[poniyur]

а код сработает, если сразу с мобилки открыть страницу?