您的问题的答案是肯定的 - 至少对于字体并且如果您对 CSS 进行了适当的编码。请参阅我对非字体的答案的后半部分,这要复杂得多。
可以控制所有字体大小的单行 CSS 是:
body {
font-size: small;
}
许多设计师会使用像素大小来编码 css,因为他们喜欢严格的控制。然而,这有一个问题——Internet Explorer(直到 IE9)在使用像素单位时不允许覆盖文本大小。调整文本大小的能力对于视力不佳的人来说是必不可少的(即任何 40 多岁以上的人由于老花眼 - 大部分人口 - 想想婴儿潮一代)。
CSS 支持绝对尺寸关键字(如 T 恤尺寸):
- xx-小
- x-小
- 小的
- 中等的
- 大的
- x-大
- xx-大
每个尺寸之间的比例因子约为 1.5。small关键字通常约为 12 像素,但浏览器之间存在一些差异。
一旦定义了基本尺寸(通常是“小”),就可以使用百分比来定义整个布局所需的相对基本尺寸。例如,如果您希望 H1 元素更大一点,那么您只需执行以下操作:
h1 {
font-size: 150%;
}
因此,任何元素都可以分配一个百分比,您可以使其大于或小于您为 body 设置的基数。不太难,根据您的问题,可以通过单个 CSS 值调整整个文档的字体大小。
还有一些坏消息和好消息。
坏消息是嵌套元素从它们的父容器继承它们的大小。因此,如果我们将#container 设置为基本大小的 95%,然后我们在该容器中有一个 H1 元素,该元素设置为 150% - 那么 H1 实际上将是 95% 的 150%(即 1.5 x 0.95 = 1.425 所以 142.5% 不是 150%)。如果您有许多不同大小的嵌套,这可能会很棘手。
好消息是 rems('root em's)是可用的,使用 rems 意味着文本大小总是相对于基本(根)字体大小进行调整 - 因此,如果您使用 rems 来定义大小,则不需要更多的数学运算。
至于非字体,这是一个很好的问题。如果您希望非字体元素适当地增长/调整大小,我建议您可能必须在 CSS 中使用百分比定义而不是像素定义。