Изменение позиций div с помощью matchMedia при загрузке страницы - PullRequest
Новая
       7

Изменение позиций div с помощью matchMedia при загрузке страницы

0 голосов
/ 13 июня 2018

У меня есть два контейнера, которые перемещаются с медиа-запросом.Когда они перемещаются, я использую matchMedia, чтобы вызвать событие, которое вызывает перемещение div из одного контейнера в другой.

CodePen

Проблема возникает, когда я обновляюстр.Медиа-запрос css работает, но matchMedia работает только при изменении запроса.Если вы перезагрузите кодовое поле шириной менее 1000 пикселей, вы увидите проблему.

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

Должен ли я просто использовать enquire.js?Я читал, что у него нет этой проблемы.Или есть простое исправление? 

<header>

  <div class="container" id="container1">
    <div class="item">1</div>
    <div class="item" id="moveMe">2</div>
    <div class="item" id="item3">3</div>

  </div>

  <div class="container" id="container2">
    <div class="item" id="item4">4</div>
  </div>

</header>

css 

header{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  padding: 1rem;
  background: #eaeaea;
}

@media (max-width: 1000px){
  header{
    flex-direction: column;
  }
}

.container{
  display: flex;
  padding: 2rem;
}

#container1{
  background: red;
}

#container2{
  background: blue;
}

.item{
  padding: 2rem;
  margin: 2rem;
  background: white;

}

js 

var container1 = document.getElementById('container1');
var container2 = document.getElementById('container2');
var moveMe = document.getElementById('moveMe');
var item3 = document.getElementById('item3');
var item4 = document.getElementById('item4');


matchMedia("(max-width: 1000px)").addListener(function(mql){
  if(mql.matches){
    container2.insertBefore(moveMe, item4);
  } else {
    container1.insertBefore(moveMe, item3);
  }
})

* edit: предложение RE i.terrible Я пытался разделитькод, чтобы я мог запустить его на window.onload. 

var mql = window.matchMedia("(max-width: 1000px)").addListener(checkMedia);

window.onload = checkMedia(mql);

function checkMedia(mql){ 
    if(mql.matches){
      container2.insertBefore(moveMe, item4);
    } else {
      container1.insertBefore(moveMe, item3);
    }
}

хотя он не работал ...

* edit2: Ах ... это работает.Я запутался выше. 

var mql = window.matchMedia("(max-width: 1000px)");

checkMedia(mql);
mql.addListener(checkMedia);

function checkMedia(mql){ 
    if(mql.matches){
      container2.insertBefore(moveMe, item4);
    } else {
      container1.insertBefore(moveMe, item3);
    }
}

Ответы [ 2 ]

0 голосов
/ 14 июня 2018

Это сработало для меня: 

var container1 = document.getElementById('container1');
var container2 = document.getElementById('container2');
var moveMe = document.getElementById('moveMe');
var item3 = document.getElementById('item3');
var item4 = document.getElementById('item4');

var mql = window.matchMedia("(max-width: 1000px)");

checkMedia(mql);
mql.addListener(checkMedia);

function checkMedia(mql){ 
    if(mql.matches){
      container2.insertBefore(moveMe, item4);
    } else {
      container1.insertBefore(moveMe, item3);
    }
}
0 голосов
/ 13 июня 2018

Надеюсь, я вас правильно понял.Вы хотели бы реагировать на изменения ширины экрана.Чтобы сделать это, привяжите медиазапрос к слушателю изменения размера следующим образом: 

    window.addEventListener('resize', function(){
        <your mq-code here>
    });

Если вы хотите, чтобы MQ запускался при загрузке страницы, также запустите его и при загрузке: 

window.onload = <your code>

В любом случае было бы лучше выполнить рефакторинг вашего медиазапроса в отдельную функцию.Пожалуйста, спросите, если я должен уточнить.

...