Zoomed-out sizing in twitter bootstrap?

问题:

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.

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.

EDIT

The answer might be closer to this:

Setting max width for body using Bootstrap

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

回答1:

With css you can do:

body {
    zoom: 75%;
}

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

and What Does 'zoom' do in CSS?

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

回答2:

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.

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

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 essential for people with poor vision (i.e. anyone 40-something plus due to presbyopia - a large percentage of the population - think baby-boomers).

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

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

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

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 {
  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.

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.

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

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.

回答3:

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.

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.

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

• variables.less
• media.less
• layouts.less
• responsive-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.