无需媒体查询的响应式布局 [英] Responsive layout without media query

问题描述

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

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

如果容器大于660px，则两个框应按比例展开。如果容器小于660px，则第二个框应转到下一行，且两个框的宽度均应为100％。

我几乎用CSS flexbox做到了。请参见此处。除了容器小于660px时，第一个框的宽度不会扩展到100％（由于固定的 margin-right：60px ）。

我知道使用媒体查询或诸如引导程序之类的某些CSS框架很容易实现，但是我想看看没有媒体查询是否有可能。

我一直在研究 flexbox 和 css网格，但是没有成功。感谢您的帮助。

编辑：

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

解决方案

如果将盒子包装在一个新容器中，并给该容器一种样式，其中盒子的边距为负值。参见 https://jsfiddle.net/qnop1wb8/9/

<前置类= snippet-code-css lang-css prettyprint-override> .wrapper {
display：flex;
flex-wrap：包装;
溢出：隐藏；
}

.wrapper__body {
flex：1;
保证金：0 -30px;
显示：继承；
flex-wrap：继承;
}

[class * = box] {
保证金：0 30px;
}

.box1 {
flex：1 1 200px;
高度：100像素；
背景：蓝色；
}

.box2 {
flex：1 1 100px;
高度：100像素；
背景：黄色；
}

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

I'm looking for a creative way of doing responsive layout without media query.

Let's say I have a row of two boxes. First one has min width of 400px. Second one has min width of 200px. The gap between them is fixed width 60px.

If the container is larger than 660px, then two boxes should expand proportionally. If the container is less than 660px, then the second box should go to next line, and both boxes' widths should be 100%.

I almost got it with css flexbox. See here. Except that when the container is less than 660px, the first box's width doesn't expand to 100% (because of fixed margin-right: 60px).

I know it's easy to achieve with media query or some css frameworks like bootstrap, but I want to see if it's possible without media query.

I've been looking into flexbox and css grid for such possibility but no success. Any help is appreciated.

EDIT:

The reason behind this is that I want to build a responsive layout based on the container's width, not viewport's width. Element Query solves this but it's not implemented in major browsers yet.

解决方案

It is possible if you wrap the boxes in a new container and give this container a style with the margin of the boxes inside as a negative value. See 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>

这篇关于无需媒体查询的响应式布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！