Question

我正在寻找一种在没有媒体查询的情况下进行自适应布局的创造性方法。

假设我有一排两个盒子。第一个最小宽度为400px。第二个最小宽度为200px。它们之间的间隙是固定宽度60px。

如果容器大于660px，则两个盒子应按比例扩大。如果容器小于660px，那么第二个盒子应该转到下一行，并且两个盒子的宽度应该是100％。

我几乎用css flexbox得到它。见here。除了当容器小于660px时，第一个框的宽度不会扩展到100％（因为固定margin-right: 60px）。

我知道使用媒体查询或某些css框架（如bootstrap）很容易实现，但我想看看是否有可能没有媒体查询。

我一直在研究 flexbox 和 css grid 这种可能性，但没有成功。任何帮助表示赞赏。

修改

这背后的原因是我想基于容器的宽度而不是视口的宽度构建响应式布局。 元素查询解决了这个问题，但尚未在主流浏览器中实现。

Answer 1

如果您将盒子包装在新容器中并将盒子边缘作为负值添加到新容器中，则可能。见https://jsfiddle.net/qnop1wb8/9/：）

或者看这个例子：

请注意，为了内联示例，我已经减少了框上的弹性基础值。 jsfiddle链接具有您的值。

.wrapper {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.wrapper__body {
  flex: 1;
  margin: 0 -30px;
  display: inherit;
  flex-wrap: inherit;
}

[class*="box"] {
  margin: 0 30px;
}

.box1 {
  flex: 1 1 200px; /* Note: decreased width for this inline example */
  height: 100px;
  background: blue;
}

.box2 {
  flex: 1 1 100px; /* Note: decreased width for this inline example */
  height: 100px;
  background: yellow;
}

<div class="wrapper">
<div class="wrapper__body">

<div class="box1">

</div>
<div class="box2">

</div>
</div>
</div>

Answer 2

如果您不想使用css媒体查询，javascript是resize事件的唯一选项：

window.addEventListener("resize", () => {
    if(window.innerWidth > 1000){
        // do something if window is bigger than 1000px
    } else {
        // do something else
    }
});

Answer 3

display: grid和grid-template-colums: repeat(auto-fill, minmax(200px, 1f))

美丽的视频Jen Simmoons

https://www.youtube.com/watch?v=tFKrK4eAiUQ

没有媒体查询的响应式布局

3 个答案: