jquery - 媒体查询不使用 matchMedia 执行

Question

这段代码在两个媒体查询上工作得很好，还有一些 jQuery 的附加操作。但是我需要刷新页面才能使两个媒体查询之一起作用。

jquery 的作用是在媒体查询中添加两个div 以获得两列网格(左侧所有图片，右侧标题和文本)。在另一个中，没有 div，我可以重新排列元素:标题，然后是第一张图片，然后是文本，然后是其余图片。

无法理解为什么我必须手动刷新页面才能获得正确的结果。会不会是听众的问题？或者是否有更好的方法来实现我的响应式要求？

var mql = window.matchMedia('(min-width:840px)');

function testState(e) {
  if (e.matches) {
    $("body").css("background-color", "lightgreen"); // for debug
    $(".a").wrapAll("<div class='illus'></div>");
    $(".b").wrapAll("<div class='aside'></div>");
  } else {
    $("body").css("background-color", "lightblue"); // for debug
  }
}

//testState(mql); removed as suggested. No use.
mql.addListener(testState);

.nom {
  grid-area: nom;
}

.texte {
  grid-area: texte;
}

.top {
  grid-area: top;
}

.down {
  grid-area: down;
}

@media (min-width: 450px) and (max-width: 840px) {
  .content {
    display: grid;
    width: 90%;
    margin: 12px auto 0 auto;
    grid-template-columns: auto;
    grid-template-rows: auto;
    grid-template-areas: "nom" "top" "texte" "down";
  }
  .illus img {
    width: 100%;
  }
}

@media (min-width: 840px) {
  .content {
    display: grid;
    grid-template-columns: 58.3333333333% 41.6666666667%;
    max-width: 954px;
    margin: 12px auto 12px auto;
    grid-template-areas: "illus aside";
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
  <div class="top a">
    <p><img src="http://via.placeholder.com/545x399"></p>
  </div>
  <div class="down a">
    <p><img src="http://via.placeholder.com/545x399"></p>
  </div>
  <div class="nom b">
    <h1>A title here</h1>
  </div>
  <div class="texte b">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget mi in purus pellentesque vestibulum vitae quis lacus. Duis gravida mattis lectus quis tincidunt.</p>
    <p>Aenean sed nibh arcu. Nullam cursus, felis sed blandit congue, tellus diam interdum purus, in molestie justo nisi sit amet mi. Vestibulum laoreet neque sed porttitor semper. Suspendisse justo quam, facilisis a maximus id, pharetra vitae velit. Cras
      viverra rutrum libero ac rhoncus.</p>
  </div>
</div>

Answer 1

你的 JS 似乎搞砸了 <div class='illus'></div>每次调整窗口大小时，它都会在内部循环，然后会破坏您的布局。

我认为您的需求不需要JS解决方案，因为它可以通过CSS本身来实现。

我重写了媒体查询中的以下 block @media (min-width: 840px) {}

.content {
  display: grid;
  max-width: 954px;
  margin: 12px auto;
  grid-template-areas:
    "top nom"
    "top  texte"
    "top  ."
    "down .";
}

CODEPEN

希望这对您有所帮助。请告诉我。