html - 100vh、50% 和响应能力

Question

我有这些堆叠的 div，它们是 height: 100vh;(存在 polyfill)。然后在那个 div 里面，我有 8 个 div，它们被认为是一个完美的正方形，我使用 width: 0; 和 padding-left: 25%; 技巧为了那个原因。但我想知道如何让 2 行始终适合 height: 100vh; div 并缩小以保持 1:1 比例。

我提供了一个 JSFiddle开始。

Answer 1

我不完全确定这是否是您要查找的内容，但您可以将 .entropy 的高度和宽度都设置为视口(viewport)高度的 25%。这样他们将永远是平方的。

然后您可能希望每 5 个方格清除一次 float 。

.wrap {
    height: 100vh;
    zoom: 1;
}

.wrap:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.entropy {
    float: left;
    width: 25vh;
    height: 25vh;
    border: 1px solid red;
}

.entropy:nth-of-type(5n) {
    clear: left;
}

.entropy:before {
    display: inline-block;
    vertical-align: middle;
    content: '';
    height: 100%; 
}

.entropy p {
    display: inline-block;
    vertical-align: middle;
}

<div class="wrap">
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
    <div class="entropy">
        <p>
            Hello
        </p>
    </div>
</div>

---

编辑:另一种方法是做这样的事情:

.entropy {
    position: relative;
    width: 25%;
    overflow: hidden;
    float: left;
}
.entropy:before {
    content: "";
    display: block;
    padding-top: 25vw;
}

这种方式使一切居中更容易，但您可能需要稍微更改 HTML。

这是一个基于视口(viewport)宽度的例子: jsfiddle .

这里是一个基于视口(viewport)高度的例子: jsfiddle .