您的问题的答案是YES - 至少对于字体和适当编码您的CSS。看到我的答案的后半部分非字体是非常棘手的。
CSS,可以控制所有字体大小的单行是:使用像素大小,因为他们喜欢的严格控制
body {
font-size: small;
}
许多设计师将编写CSS。然而,这有一个问题 - Internet Explorer(它们一直到IE9)不允许在使用像素单元时覆盖文本大小。调整文字大小的能力为必备对于视力不好的人(即任何40岁以上的老花眼患者 - 大部分人群 - 认为婴儿潮一代)。
CSS支持绝对大小的关键字(一拉短衫大小):
- XX-小
- 的x小
- 小
- 介质
- 大
- X-大
- xx-large
它们在每个尺寸之间具有大约1.5的缩放因子。 小关键字通常约为12像素,但浏览器之间有一些差异。
一旦你定义了你的基本尺寸(它通常是'小'),那么你可以使用百分比来定义你在整个布局中需要的相对基本尺寸。例如,如果你想H1元素是相当大一点,那么你会简单地做:
h1 {
font-size: 150%;
}
所以任何元素都可以指定一个百分比,你可以把它比您已设置为基本更大或更小身体。不要太难,并根据您的问题,整个文档字体大小可以通过一个CSS值进行调整。
还有一些坏消息和好消息。
坏消息是嵌套元素从父容器继承它们的大小。所以如果我们设置#容器有95%的基本尺寸,然后我们在该容器中有一个H1元素设置为150% - 那么H1实际上是95%的150%(这是1.5×0.95 = 1.425因此142.5%不是150%)。如果你有很多不同尺寸的嵌套,这可能会很棘手。
的好消息是,雷姆('根EM的)都可以使用REMS意味着文本大小始终尺寸相对到基地(根)字体大小 - 如果你使用这样不需要更多的数学重新定义大小。
至于非字体,这是一个很好的问题。如果您希望非字体元素适当增大/调整大小,我建议您可能必须在CSS中使用百分比定义而不是像素定义。
谢谢,这是如何使用字体大小的一个很好的解释,但是这并没有解决我所问的twitter-bootstrap框架,它使用了固定尺寸和相对尺寸的组合。这些野兽的肠子里隐藏着很多无数的设置,我正在寻找复制变焦的设置。这里是引导文档页面,如果你有兴趣:http://twitter.github.com/bootstrap/ – Mittenchops
谢谢。但别忘了Bootstrap是由LESS制作的。 – timbo
在Bootstrap源文件中的variables.less中,基本字体大小由\ @baseFontSize定义 - 当前设置为14px。 *所有*其他字体大小均来自\ @baseFontSize。我确实尝试了使用\ @baseFontSize small的构建;但构建失败 - 大概是因为它无法从非数字值中进行数学运算。 – timbo