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本身实现。

我在媒体查询@media (min-width: 840px) {}

中重写了以下块

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

CODEPEN

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

媒体查询不会与matchMedia一起执行

1 个答案: