缩放浏览器时如何使div按比例流动？答案

【问题标题】：How to make a div proportionally fluid when scaling browser?缩放浏览器时如何使div按比例流动？
【发布时间】：2015-08-12 00:35:10
【问题描述】：

所以我想让我的内容成为一个 2 列布局的 div，填满整个“容器”。但我希望在窗口放大或缩小时按比例调整“335px X 250px”div 的大小。这是我希望它看起来像下图的示例图像，我该怎么做？

JSFiddle 链接：https://jsfiddle.net/gdkvcnyj/15/

<body>
    <div id="body-wrap">
        <div id="mobilenav"></div>
        <div class="content-wrap">
            <div id="container">
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>
                <div class="mix"></div>        
            </div>
        </div>
    </div> <!-- end of Body Wrap -->
</body>

【问题讨论】：

标签： html css web fluid-layout

【解决方案1】：

已将 .mix 元素更改为使用百分比宽度而不是绝对值。 jsfiddle here.

希望对您有所帮助。

【讨论】：

问题是我希望宽度和高度按比例缩放。不仅仅是宽度。
高度比宽度更复杂。您可以简单地将 .mix 元素的 height 属性设置为百分比，但这不适用于所有浏览器，此外，如果您添加更多内容，则需要不断更改该值。我认为唯一的选择是使用 javascript。已更新 jsfiddle：[jsfiddle.net/claytonF/gdkvcnyj/26/]

【解决方案2】：

使用百分比而不是设置图像大小，浏览器会相应地进行调整。与高度相同。

【讨论】：

【解决方案3】：

请注意，% 单位与div 的容器成比例，而不是视口。听起来你想要视口。

因此，为了使尺寸与视口的宽度和高度完全成比例，您需要相对于视口的单位：vw 和 vh。请注意，browser support 只是最近的 A 级浏览器，但如果您的用例可以处理它，那么它们是完美的选择。以与% 单元相同的方式使用它们，只是知道它们不是相对于容器，而是相对于窗口。因此，如果您希望某些东西始终是窗口/视口大小的一半，并在两个轴上调整大小：

height: 50vh;
width: 50vw;

【讨论】：

嗯，我明白了。感谢您的宝贵时间！