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

Question

我正在寻找一种无需媒体查询即可进行响应式布局的创新方式。

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

如果容器大于660px，那么两个框应该按比例展开。如果容器小于 660px，那么第二个框应该到下一行，两个框的宽度都应该是 100%。

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

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

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

编辑：

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

Answer 1

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

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

Answer 2

如果您将盒子包装在一个新容器中，并为该容器指定一个样式，其中盒子内部的边距为负值，则可能会出现这种情况。参见 https://jsfiddle.net/qnop1wb8/9/

.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;
  height: 100px;
  background: blue;
}

.box2 {
  flex: 1 1 100px;
  height: 100px;
  background: yellow;
}

<div class="wrapper">
<div class="wrapper__body">

<div class="box1">

</div>
<div class="box2">

</div>
</div>
</div>

Answer 3

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

Jen Simmoons 的精彩视频

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

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

Responsive layout without media query

html

css

flexbox

css-grid