流体布局。 2列。当浏览器窗口变窄时，使一个在另一个之前变窄答案

【问题标题】：Fluid layout. 2 columns. Make one get narrower before the other when the browser window is narrowed流体布局。 2列。当浏览器窗口变窄时，使一个在另一个之前变窄
【发布时间】：2012-10-05 03:28:49
【问题描述】：

考虑以下布局：

有 2 列设置了 min-width 和 max-width（每列不同）。当用户代理变窄时，右列开始变窄，而左列保持初始宽度。在右列位于其min-width 之后，左列开始变得更窄，直到它也位于其min-width。

是否可以仅使用 CSS 来实现此效果？如果有，怎么做？

【问题讨论】：

标签： css layout user-agent fluid-layout two-columns

【解决方案1】：

如果您使用media queries，这将是可能的。

在基本样式的左列上放置一个静态宽度。然后在某个屏幕宽度处激活的媒体查询中，例如：@media all and (max-device-width: 460px), (max-width: 460px)，给它一个更小的min-width。

“确定的屏幕宽度”应该是您的右栏达到其最小宽度的屏幕宽度。

此处示例：http://jsbin.com/ivodam/1/edit

【讨论】：

似乎是对的！您能否提供一些 CSS，因为我对媒体查询非常缺乏经验？
当然，我在答案中添加了示例链接。
谢谢！但是，是否有可能在媒体查询开始时摆脱这种突然的变化？
并非如此。您可以添加更多宽度查询来尝试强制平滑过渡，或者您可以使用transitions（尝试all 0.5s ease 0s 之类的值并查看差异），但最终页面布局将在每个媒体查询阈值处发生变化。不过，这没有理由打扰用户 - 如果他们正在更改窗口大小，他们会期待布局更改。