媒体查询不使用 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> 正在自己内部循环，每次你调整 window 的大小时，这会破坏你的布局。

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

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

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

CODEPEN

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

媒体查询不使用 matchMedia 执行

Media query doesn't execute with matchMedia

css

jquery

media-queries

css-grid