使用 em 作为宽度和高度的测量单位进行弹性设计
Using em as measurment unit for width and height for elastic design
我想了解您是否（以及如何）将 em 测量值 用于设置 width[=24] 的 CSS 属性=] 和 height 元素的 elastic 设计布局（宽度、高度、最小宽度、最小高度、最大宽度和最大宽度）高度）。问题与主包装器的布局位置有关。我不明白在设计我的布局（而不是调整大小）时应该何时以及如何使用 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 的宽度和高度。
em 测量值基于 font-size
您需要使用的是 % 或 vw（视口单位）
我建议使用 %，因为 vw/vh 在移动版 Safari 中可能会出现一些奇怪的错误：
当显示地址栏时，100% 并不总是与 100vh 相同。
100% 将在地址栏显示时缩小内容以适应100vh 不会，所以您的内容可能会出现在地址栏下方
我想了解您是否（以及如何）将 em 测量值 用于设置 width[=24] 的 CSS 属性=] 和 height 元素的 elastic 设计布局（宽度、高度、最小宽度、最小高度、最大宽度和最大宽度）高度）。问题与主包装器的布局位置有关。我不明白在设计我的布局（而不是调整大小）时应该何时以及如何使用 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 的宽度和高度。
em 测量值基于 font-size
您需要使用的是 % 或 vw（视口单位）
我建议使用 %，因为 vw/vh 在移动版 Safari 中可能会出现一些奇怪的错误：
100% 并不总是与 100vh 相同。
100%将在地址栏显示时缩小内容以适应100vh不会，所以您的内容可能会出现在地址栏下方