Question

我正在制作Fluid +响应式布局，其中布局在浏览器/屏幕上重新调整大小。

如果font-size body的{{1}}使用%百分比，则em用于所有事情是好的，

font-size
width
margin
padding
border-width
border-radius

或者我应该仅将em用于font-size？

我的目标是在事物向上和向下扩展时保持一致。

我应该使用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;
}

Answer 2

对于我的项目，我这样做：

浏览器默认字体大小为16px
设置html { font-size:100.01%;}。 0.01％减少了四舍五入的误差。一个通用的“综合”来解决调整大小使文本有时非常小的情况
使用此工具：http://pxtoem.com/您可以轻松地将px转换为ems。
所以，如果我设置body {font-size: 75%;}，则字体大小为12px，因为16％的75％是12。

px最适用于页面的一般布局，例如页面，边距，填充的部分。 px的问题是，特别是在像IE6这样具有“最小，较小，正常，大和大”文本缩放的浏览器中，px单元字体不会调整大小。但是，在全页缩放的出现，我们不需要这个文本缩放。页面缩放，内容和文字不像过去。

ems最适用于填充和文本边距以及文本的字体大小。在IE文本缩放的情况下，ems DO会响应该值进行调整。

百分比？在某些情况下，我不使用它们或很少使用它们。

如果body的font-size是％百分比，那么对所有东西使用em是否合适，在某些地方应该使用font-size width，margin padding或％？

2 个答案: