4

当(在我的浏览器中)我缩小了两次时,我喜欢使用 twitter bootstrap 的所有项目的大小,ctrl -,ctrl -,而不是默认值,使用 ctrl+0 查看。

缩放会影响字体大小、响应式设计以及我想使用引导程序的其他十几个重要原因,所以我不想粗暴地修复宽度并破坏所有这些。

Bootstrap 是否有一个 CSS 值(或其中的一小部分),我可以在某个地方进行更改以产生类似缩放和调整大小的东西?我意识到设置缩放本身更多的是浏览器问题,所以我也不想那样硬编码。

编辑

答案可能更接近于这个:

使用 Bootstrap 设置身体的最大宽度

...这表明不?我必须重新编译引导程序?

4

3 回答 3

14

使用 CSS,您可以:

body {
    zoom: 75%;
}

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

以及CSS 中的“缩放”有什么作用?

Firefox 目前似乎不支持缩放(截至 2013 年 8 月)。

于 2013-08-30T15:21:47.630 回答
2

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

于 2012-12-07T10:45:31.563 回答
2

答案是否定的,在引导设置中没有单一、简单的方法可以做到这一点,即使从 LESS 重新编译在桌面上也是如此。

问题的症结在于引导响应式设计适用于大型 1200 像素显示器。这使得 1000 像素笔记本电脑的显示屏看起来非常放大。

直接编辑较少的文件,我减少了字体大小,减少了 1200 的宽度和字体大小。

  • 变量.less
  • 无媒体
  • 布局.less
  • 响应式 1200-min.less

它似乎只是打破了导航栏。我从引导 github 的理解是,硬编码的数量比变量所暗示的少得多,这也是问题的主要原因。

于 2012-12-22T03:25:38.720 回答