從2列到一列布局而不使用媒體查詢？

Question

初始佈局：

[流體左列] [最小寬度300像素右側的列]

成果我想當視口低於800像素：

[100％寬度左列]
[100％右列]

是否可以不使用媒體查詢？ 謝謝

Answer 1

如果你可以使用柔性盒，有一個非常好的實現在這裏：

Flexbox Responsive Trick with break points

查找代碼的這一部分。神奇的是在flex的flex-grow，shrink，基礎上

.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 

*不是我的代碼的方式......屬於代碼筆作者。

如果不是，您可以使用「The Fab Four Technique」，它用於許多需要響應但不能包含媒體查詢的電子郵件。鏈接的文章逐步顯示如何實現它。

The Fab Four Technique