html - 用 em、% 或 px 初始化正文字体大小？

Question

我曾经使用 em 作为我的正文字体大小，比如正文{font-size: 1em;}

但我刚刚发现如果在我的设置中使用 em，我写的是 width: 56.25em，它与 width: 900px 不一样。但是如果我写 body {font-size: 16px}，它会起作用。

这是我的 fiddle example ，你可以点击“px”、“%”、“em”查看我的问题。

如果我想用 em 设置宽度，我应该写 body {font-size: 1em;} 吗？谢谢

Answer 1

为了用em设置宽度，最好用px设置body font-size。我针对移动设备对其进行了优化，然后确保使用过渡属性在移动设备视口(viewport)上进行平滑过渡。这是我的设置:

body { 
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; 
    font-weight: 400;
    text-align: center;
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s; 
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in; 
    transition-timing function: linear, ease-in; 
    text-rendering: optimizeLegibility; 
}