Twitter Bootstrap中的缩小尺寸？

Question

当我在浏览器中缩小两倍（ctrl-, ctrl-），而不是默认的ctrl+0查看时，我喜欢使用twitter bootstrap中所有项目的尺寸。

缩放会影响字体大小、响应式设计和其他许多我想要使用Bootstrap的好处，因此我不想通过hackish方法来修复宽度并破坏所有这些内容。

Bootstrap是否有一个单一的CSS值（或一小组值）可以在某个地方更改，以产生类似于这种缩放和调整大小的效果？我意识到设置缩放本身更多是浏览器问题，因此我也不想以硬编码方式解决它。

编辑

答案可能更接近于这个：

使用Bootstrap设置body的最大宽度

...这暗示了没有？我必须重新编译Bootstrap吗？

- Mittenchops

Answer 1

使用 CSS 你可以做到：

body {
    zoom: 75%;
}

请参考: http://dev.w3.org/csswg/css-device-adapt/#the-lsquozoomrsquo-descriptor

以及 'zoom' 在 CSS 中是什么？

截至 2013 年 8 月，似乎 Firefox 目前不支持 zoom 属性。

- stephenbez

Answer 2

你的问题的答案是肯定的 - 至少对于字体，如果你适当编写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 中使用百分比定义而不是像素定义。

- timbo

---

谢谢，这是一个很好的关于如何使用字体大小的解释，但这并没有回答我所问的关于 Twitter-Bootstrap 框架的问题。该框架使用固定和相对大小的组合。在那个庞然大物的深处有很多 .less 设置，我正在寻找复制缩放的设置。如果您感兴趣，这是 Bootstrap 文档页面链接：http://twitter.github.com/bootstrap/ - Mittenchops

谢谢。但不要忘记Bootstrap是由LESS生成的。 - timbo

在Bootstrap源代码的variables.less文件中，基础字体大小由@baseFontSize定义，当前设置为14px。而所有其他字体大小都是从@baseFontSize派生出来的。我确实尝试过使用小的@baseFontSize进行构建；但是构建失败了-可能是因为它无法从非数字值进行计算。 - timbo

Answer 3

答案是否定的，在bootstrap设置中没有单一简单的方法来实现这一点，即使重新编译LESS也不行。

问题的关键在于bootstrap响应式设计适用于大型1200像素显示屏。这使得1000像素的笔记本电脑显示看起来高度放大。

直接编辑less文件，我减小了字体大小，缩小了1200宽度和字体大小。

variables.less media.less layouts.less responsive-1200-min.less

但似乎只破坏了导航栏。从bootstrap github上了解到，硬编码比less变量建议的要多得多，这就占了很多问题的原因。

- Mittenchops