Html 无媒体查询的响应式布局

我正在寻找一种创造性的方式，在没有媒体查询的情况下进行响应式布局

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

如果容器大于660px，则两个箱子应按比例膨胀。如果容器小于660px，则第二个盒子应转到下一行，两个盒子的宽度应为100%

我几乎用css flexbox得到了它。看见除了当容器小于660px时，第一个框的宽度不会扩展到100%（因为固定的

右边距：60px

）

我知道使用媒体查询或一些css框架（如bootstrap）很容易实现，但我想看看是否可以不使用媒体查询

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

编辑：

---

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

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

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

---

如果将框包装在一个新容器中，并为该容器指定一个样式，其中框的边距为负值，则这是可能的。看

.wrapper{
显示器：flex；
柔性包装：包装；
溢出：隐藏；
}
.wrapper___身体{
弹性：1；
利润率：0-30px；
显示：继承；
柔性包装：继承；
}
[类别*=“盒子”]{
利润率：0.30px；
}
.box1{
flex:1200px；
高度：100px；
背景：蓝色；
}
.box2{
弹性：1100像素；
高度：100px；
背景：黄色；
}

---

显示：网格和

网格模板列：重复（自动填充，最小值（200px，1f））

美丽的视频Jen Simmoons

---

这就像是在没有照相机的情况下拍照一样。或者不用飞机飞行。响应性和媒体查询是密不可分的，即使是最狡猾的W3C方案制定者也无法理清它们之间的关系？这就是它的目的。使用媒体查询有什么问题吗？我想你可以使用

flexbox

但你需要更多地解决你的计算问题。对于那些认为这是不可能的人来说，也许是这样的，看看公认的答案吧！实际上，你不需要两个包装纸就可以工作。一个包装就够了。看见但是你的解决方案有效！！！这是正确的，但您可能会收到溢出。所以我建议也使用body，这样就可以设置overflow:hidden；在“实际”父级上（本例中为包装器）。如果您将其放置在带有填充物或边距的嵌套布局中，这将具有优势。您是对的，但实际的父级不需要

display:flex

和

flex wrap

，对吗？