Question

我有两个随媒体查询移动的容器。当他们移动时，我使用matchMedia来触发一个事件，导致div从一个容器移动到另一个容器。

刷新页面时出现问题。 css媒体查询有效，但matchMedia仅在查询更改时有效。如果您在1000px宽度下重新加载codepen，您将看到问题。

我已经搜索并阅读了一些答案，但我是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);
  }
})

*编辑：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);
    }
}

Answer 1

我希望我能正确理解你。您想对屏幕宽度的变化做出反应。为此，请将媒体查询绑定到调整大小侦听器，如下所示：

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

如果您希望在页面加载时触发MQ，也可以在加载时运行它：

window.onload = <your code>

在任何情况下，最好将媒体查询重构为单独的函数。请问，我是否应该详细说明。

Answer 2

这对我有用：

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);
    }
}

在页面加载时使用matchMedia更改div位置

2 个答案: