Question

em和%在文字大小调整和固定宽度网站方面有何区别？如果我仅使用em或%进行固定宽度网站中的文本大小调整正文设置为

{body:font-size:100%}

这些最佳实践在css中用于固定宽度的文本大小在可访问性和移动设备友好方面是什么？

使用ctrl + 0调整浏览器中文本大小的％和em有什么区别？

哪个更好，为什么一个应该用于另一个？ %有什么问题以及em

的好处是什么？

请用实例说明。

Answer 1

两者都是指定相对度量的方法。区别在于它们相对于什么。

%相对于容器

em与字体大小相关

因此，对于一个实际示例，请检查此em example并增加字体大小（CTRL和+），您会看到包含该文本的div也会增加其大小。

在另一个page中，当你这样做时，div不会增加它们的大小。

Answer 2

em来自同名的印刷术语。它是当前字体中字母“m”的宽度。如果您将宽度设置为10em，则宽度将固定为，其宽度为“m”的10倍。

%是整数的百分之一。它描述的大小取决于其潜在的最大值。因此，假设在浏览器窗口中查看简单的网页，没有列或任何内容，宽度50%表示窗口宽度的一半（50/100）。实际宽度将随窗口宽度而变化。如果您打印出页面，则宽度会变为纸张上可打印区域宽度的一半。

您使用哪一个取决于您是否需要根据窗口大小调整相关尺寸。如果需要进行调整，请使用%。如果您需要它保持固定尺寸，请使用em。

编辑：啊，与font-size描述符有关。引用我使用的一些online docs，font-size和%使字体大小相对于其父级。什么是body的父母？一个很好的问题，我的参考文献没有回答。我认为它是CSS中的更高级别的说明符（即可被覆盖的说明符）或文档默认值。

至于em，那个取ems中的长度（如上所定义）并将其转换为字体大小（例如，转换为mm然后转换为点）。由于大多数字体的em都不等于行高，因此我不希望1em与100%的含义相同。

Answer 3

我认为最好的选择是在100％中声明正文的字体大小（可能还有HTML元素）：

body,html {font-size:100%;}

因此字体大小将相对于浏览器/用户规范。然后为文本及其容器声明em：

div {font-size:1em;width:32em;}

正如Pablo所说，这允许容器相对于其文本进行缩放。因此，如果字体大小增加，容器也会增长，并且您在一行中具有相同的单词，无论用户选择何种大小。宽度为30 - 35 em的宽度允许读取舒适，并且您有固定的宽度，固定为字体大小。