Question

我试图了解是否（以及如何）将 em测量用于设置CSS的 width 和 height 的CSS属性。弹性设计布局的元素（宽度，高度，最小宽度，最小高度，最大宽度和最大高度）。问题与主包装纸的布局位置有关。我不知道何时以及在布局时应如何将em度量用于宽度和高度属性（而不是用于大小调整）。例如，如果我希望主包装的宽度为正文元素的90％，如何使用em而不是％来实现？

我已经在Stack Overflow上搜索了类似的问题，但是答案包括诸如响应式设计，JavaScript和JQuery之类的东西。我只能使用HTML5和CSS3。我还尝试使用不同的em值设置宽度和高度，但是主包装器不会保持居中或超出屏幕尺寸。

这是我尝试过的代码片段。完整的代码位于JSFiddle

上

<div id="page">
    <header>
        <nav></nav>
    </header>
    <div id="content">
        <article></article>
        <article></article>
    </div>
    <aside></aside>
    <footer></footer>
</div>


#page {
    position: relative;
    width: 90em;
    height: 90em;
    top: 1em;
    right: 1em;
    bottom: 1em;
    left: 1em;
}

上面的代码使主包装在垂直和水平方向上都超出了屏幕尺寸。我希望结果等于宽度和高度使用90％而不是90em。

Answer 1

em测量基于font-size

您将需要使用%或vw（视口单位）

我建议使用%作为vw / vh可以在移动Safari中出现一些奇怪的错误：

显示地址栏时，

100%并不总是与100vh相同。

100%将缩小内容以适合显示地址栏的情况
100vh不会，因此您的内容可能会显示在地址栏下方

使用em作为宽度和高度的测量单位以进行弹性设计

1 个答案: