css - 如果 body 的 font-size 是 % percentage 那么对所有东西都使用 em 是不是很好，font-size width，margin padding 或 % 应该在某些地方使用？

Question

我正在制作 Fluid + 响应式布局，其中布局在浏览器/屏幕调整大小时放大和缩小。

如果我使用 body 的 font-size 是 % 百分比那么使用 em 是否合适对于所有的事情，

• 字体大小
• 宽度
• 边距
• 填充
• 边框宽度
• 边界半径

或者我应该只为 font-size 使用 em？

我的目标是在放大和缩小时保持一切都成比例。

当我应该使用 em 以及何时使用 % 时，我有点困惑。我的正文 font-size 是 62.5%

Answer 1

在每个浏览器都支持缩放之前，使用 em 曾经被认为是可访问性的良好做法。现在我发现它最适合在特定场景(也许是您的场景)中轻松声明相对字体大小。

我发现相对大小不会在边框上产生美观的结果，因为某些浏览器会尝试按字面意义使用从 em 或百分比派生的浮点值计算结果会很模糊(试一试)。

我在大多数布局中大量使用百分比。我发现一些基于通用百分比的样式可以满足多种布局需求(例如用于 50/50 拆分、33/67、25/75 等的样式)。

我个人认为处理百分比更直观。宽度为 100% 的元素将始终占据其父元素的 100%(当然，使用正确的框大小)并且在您的代码中很容易阅读。一个 15em 宽的元素可能占据其父元素的 50% 或 150%；它不是很明显，我发现更难跟踪(但也许只有我就是这样)。

这里有一些基线样式。这些尚未在所有可能的浏览器/设备上进行测试，但它们已用于生产应用程序:

* {
    border-style: none;
    border-color: inherit;
    border-width: 0;
    padding: 0;
    margin: 0;
    vertical-align: baseline;
}

BODY {
    font: 11px/1.5 "Trebuchet MS", Arial, Verdana, sans-serif;
    color: #404040;
    background-color: #fff;
}

H1 {
    font-size: 1.8em;
    margin: .1em 0 .1em 0;
    color: #2B265B;
}

H2 {
    font-size: 1.6em;
    margin: 0 0 .25em 0;
    color: #303030;
}

H3 {
    font-size: 1.4em;
    margin: 0 0 .25em 0;
    color: #3b5998;
}

H4 {
    font-size: 1.2em;
    margin: 0 0 .1em 0;
    color: #666;
}

P {
    margin: 0 0 1.5em 0;
    font-size: 1.1em;
}

INPUT, SELECT, TEXTAREA {
    border-style: solid;
    vertical-align: middle;
    margin: .2em 0 .2em 0;
    border-radius: .3em;
    -moz-border-radius: .3em;
}

INPUT[type="text"], INPUT[type="password"]{
    border-color: #85a3bf;
    width: 16em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="file"] {
    border-color: #85a3bf;
    width: 32em;
    padding: .2em;
    border-width: 1px;
}

INPUT[type="text"]:focus, INPUT[type="password"]:focus, TEXTAREA:focus {
    border-color: #0066cc;
}

INPUT[type="submit"], INPUT[type="button"] {
    border-color: #DDDDDD #BBBBBB #999999;
    border-width: 1px;
    background: #eee url([URL]) repeat-x;
    padding: .2em .8em .2em .8em;
    text-shadow: 1px 1px #fff;
}

INPUT[type="submit"]:hover, INPUT[type="button"]:hover {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="submit"]:active, INPUT[type="button"]:active {
    background: #eee url([URL]) repeat-x;
}

INPUT[type="checkbox"], INPUT[type="radio"] {
    margin: 0px .5em .1em .5em;
    vertical-align: middle;
}

INPUT[type="image"] {
    border: 0;
    margin: 0;
}

SELECT {
    padding: .1em;
    border-width: 1px;
    border-color: #DDDDDD #BBBBBB #999999;
    background: #eee url([URL]) repeat-x;
}

TEXTAREA {
    border-width: 1px;
    border-color: #85a3bf;
    padding: .3em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}