twitter-bootstrap 推特引导程序中的缩小尺寸？

Zoomed-out sizing in twitter bootstrap?

提问by Mittenchops

I like the sizes of all items using twitter bootstrap when (in my browser) I've zoomed out twice, ctrl -, ctrl -, rather than the default, viewing with ctrl+0.

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

Zooming affects font sizes, the responsive design, and a dozen of the other great reasons I want to use bootstrap, so I don't want to hackishly just fix a width and break all of that.

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

Does Bootstrap have a single CSS value (or a small set of them) that I can change somewhere that produces something like this zoom and sizing? I realize setting zoom itself is more of a browser-issue, so I'd rather not hard-code it that way, either.

Bootstrap 是否有一个单独的 CSS 值（或其中的一小部分），我可以在某处进行更改以产生类似缩放和大小的效果？我意识到设置缩放本身更像是一个浏览器问题，所以我也不想以这种方式对其进行硬编码。

EDIT

编辑

The answer might be closer to this:

答案可能更接近于此：

Setting max width for body using Bootstrap

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

...which suggests no? I have to recompile bootstrap?

...这表明没有？我必须重新编译引导程序？

采纳答案by Mittenchops

The answer is NO, there is no single, simple way to do this in bootstrap settings, even when recompiling from LESS is on the table.

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

The crux of the issue is that the bootstrap responsive design works with massive 1200px displays. This makes a 1000px laptop's display look highly zoomed-in.

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

Editing the less files directly, I reduced font-sizes, reduced the 1200 width and font sizes in..

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

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

• 无变量
• 无媒体
• layouts.less
• 响应 1200-min.less

And it only seemed to break the navbar. My understanding from the bootstrap github is that there is a fair amount more hardcoding than the less variables suggest, and that accounts for much of the problem.

它似乎只是打破了导航栏。我对 bootstrap github 的理解是，硬编码比较少的变量所暗示的要多得多，这说明了大部分问题。

回答by stephenbez

With css you can do:

使用 css，您可以执行以下操作：

body {
    zoom: 75%;
}

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

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

and What Does 'zoom' do in CSS?

以及“缩放”在 CSS 中有什么作用？

It appears that zoom may not (as of August 2013) be currently supported in Firefox.

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

回答by timbo

The answer to your question is YES - at least for fonts and if you code your CSS appropriately. See the latter part of my answer for non-fonts which is a lot trickier.

你的问题的答案是肯定的——至少对于字体，如果你对 CSS 进行了适当的编码。请参阅我对非字体的回答的后半部分，这要棘手得多。

The single line of CSS that can control all font sizes is:

可以控制所有字体大小的单行 CSS 是：

body {
  font-size: small;
} 

Many designers will code css using pixel sizes because they like the exacting control. However there is a problem with this - Internet Explorer (all they way up to IE9) does not allow the override of text size when pixel units are used. The ability to adjust text size is essentialfor people with poor vision (i.e. anyone 40-something plus due to presbyopia - a large percentage of the population - think baby-boomers).

许多设计师会使用像素大小编写 css 代码，因为他们喜欢精确的控制。但是，这存在一个问题 - Internet Explorer（直到 IE9）不允许在使用像素单位时覆盖文本大小。调整文字大小的能力对于视力不佳的人（即任何 40 多岁的老花眼 - 占人口的很大比例 - 想想婴儿潮一代）至关重要。

CSS supports absolute size keywords (a la T-shirt sizes):

CSS 支持绝对尺寸关键字（如 T 恤尺寸）：

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

• xx-小
• x-小
• 小的
• 中等的
• 大
• x-大
• xx-大

which have approximately a 1.5 scaling factor between each size. The smallkeyword is usually about 12 pixels but there is some variation between browsers.

每个尺寸之间大约有 1.5 的比例因子。该小关键词通常是约12个像素，但有浏览器之间的一些差异。

Once you have defined your base size (it's usually 'small'), then you can use percentages to define the relative to base sizes that you will need throughout your layout. For example, if you wanted H1 elements to be quite a bit larger then you would simply do:

一旦定义了基本尺寸（通常是“小”），您就可以使用百分比来定义整个布局所需的相对于基本尺寸。例如，如果您希望 H1 元素更大一些，那么您只需执行以下操作：

h1 {
  font-size: 150%;
} 

So any element can be assigned a percentage and you can make it larger or smaller than the base you have set for body. Not too hard and as per your question, the entire document font sizing can be adjusted through a single CSS value.

因此，可以为任何元素分配一个百分比，您可以将其设置为大于或小于为 body 设置的基数。不太难，根据您的问题，可以通过单个 CSS 值调整整个文档字体大小。

There is some further bad news and good news.

还有一些进一步的坏消息和好消息。

The bad news is that nested elements inherit their sizings from their parent containers. So if we set a #container to have 95% of the base size, and then we had an H1 element in that container which was set at 150% - then the H1 would actually be 150% of 95% (which is 1.5 x 0.95 = 1.425 so 142.5% not 150%). This can be tricky where you have much nesting of many different sizes.

坏消息是嵌套元素从它们的父容器继承了它们的大小。因此，如果我们将 #container 设置为基本大小的 95%，然后我们在该容器中设置了一个 H1 元素并将其设置为 150% - 那么 H1 实际上将是 95% 的 150%（即 1.5 x 0.95 = 1.425 所以 142.5% 不是 150%）。如果您有许多不同大小的嵌套，这可能会很棘手。

The good news is that rems ('root em's) are available and using rems means that the text-size is always sized relativeto the base (root) font-size - so no more math required if you use rems to define sizing.

好消息是 rems ('root em's) 是可用的，使用 rems 意味着文本大小总是相对于基本（root）字体大小 - 所以如果你使用 rems 来定义大小，则不需要更多的数学计算。

As for non-fonts, that's a good question. I would suggest that you probably have to use percentage definitions in CSS rather than pixel definitions if you wanted non-font elements to grow/resize appropriately.

至于非字体，这是一个很好的问题。如果您希望非字体元素适当地增长/调整大小，我建议您可能必须在 CSS 中使用百分比定义而不是像素定义。