代码之家 › 专栏 › 技术社区 › Shawn

无媒体查询的响应式布局

css-grid flexbox css html

Shawn · 技术社区 · 7 年前

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

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

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

我几乎用css flexbox获得了它。看见 here 。除了当容器小于660px时,第一个盒子的宽度不会扩展到100%(因为固定 margin-right: 60px )。

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

我一直在调查 柔性箱 和 css网格 对于这种可能性,但没有成功。非常感谢您的帮助。

编辑:

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

3 回复 | 直到 7 年前

CoenFuze 4 年前

如果将框包装在新容器中,并为该容器指定一种样式,其中框的边距为负值,则这是可能的。看见 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>

Fatih HayrioÄlu 6 年前

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

美丽视频Jen Simmoons

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

Alex C 7 年前

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

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

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前