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