Question

初始布局：

[左液柱] [最小宽度300px右栏]

当视口低于800px时我想要的结果：

[左侧宽度100％]
[右栏100％宽度]

不使用媒体查询是否可行？谢谢

Answer 1

如果您可以使用弹性框，那么这里有一个非常好的实现：

Flexbox Responsive Trick with break points

查找代码的这一部分。灵感来自于flex的flex-grow，shrink，basis

.container{
   display:flex;
   flex-wrap:wrap;
}
.fluidWidthDownToAPoint{
  flex-grow:999999; // a relatively big number: needed for OTHER column to 
  be fixed width // if it's too big IE fails to compute
  flex-shrink:1;
  flex-basis:400px; //effectively it's min-width
}
.fixedUnlessOnOwnRow{
 flex-grow:1; // a relatively small number: needed for THIS column to be 
 fixed width
 flex-shrink:1;
 flex-basis:300px; //effectively it's min-width

*顺便说一下，我的代码不属于代码笔作者。

如果没有，你可以使用＆＃34; Fab Four Technique＆＃34;用于许多需要响应但不包含媒体查询的电子邮件。链接的文章逐步说明了如何实现它。

The Fab Four Technique

从2列到1列布局而不使用媒体查询？

1 个答案: