Question

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

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

这是我的fiddle example，您可以点击＆＃34; px＆＃34;，＆＃34;％＆＃34;，＆＃34; em＆＃34;看到我的问题。

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

Answer 1

为了用em设置宽度，最好用px设置body字体大小。我在移动后优化它然后确保移动视口的平滑过渡与过渡属性。这是我的设置：

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; 
}

Answer 2

我强烈建议不要根据px设置正文font-size，因为这会覆盖用户可能放入的任何浏览器设置，因此是一个糟糕的可访问性决策。就个人而言，我认为没有理由设置身体font-size，除了移动设备;但如果您需要设置它，最好将其设置为百分比或em s。

让我举一个个人的例子。我有间歇性的眼部问题。在美好的日子里，我使用＆＃34; normal＆＃34; font-size（16）;在糟糕的日子里，我将浏览器中的字体大小（在Chrome中，设置 - ＆gt;高级 - >字体大小）增加到18,20或更高。

今天，我的尺寸设定得更高。在你的小提琴中，单击％或em会显示我设置的更大的字体大小，并希望在所有网站上看到，而点击px会覆盖该设置并强制我放大或自己手动覆盖样式。

作为旁注，以em为单位设置宽度的整点是宽度为5em的对象具有不同的宽度（以像素为单位），但是与字体成比例的恒定宽度 - 元素的大小。如果你真的想要在px中有一定的宽度，你应该指定px;如果您希望它随字体大小（例如，列宽）而变化，您可能希望使用em s。

通过em，％或px初始化正文字体大小？

2 个答案: