Reduced size in twitter bootstrap?

Question

I like the sizes of all elements using twitter bootstrap when (in my browser) I double-zoomed, ctrl -, ctrl -, and not by default, browsing with ctrl + 0.

Scaling affects font sizes, responsive design, and dozens of other serious reasons why I want to use bootstrap, so I don’t want hacks to just fix the width and break it all.

Does Bootstrap have a single CSS value (or a small set of them) that I can change somewhere that creates something like this scaling and size? I understand that setting the scaling itself is more of a browser problem, so I would rather not hard code it.

EDIT

The answer may be closer to this:

Setting maximum body width with Bootstrap

... what does not imply? Do I need to recompile bootstrap?

Answer 1

The answer is NO, there is no simple and easy way to do this in the boot settings, even if you recompile from LESS in the table.

The bottom line is that the bootstrap-responsive design works with massive 1,200-pixel displays. This leads to the fact that the laptop display at 1000 pixels looks very enlarged.

Editing files is smaller, I reduced the font size, reduced the width and font size of 1200 in.

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

And it just seemed to disrupt navigation. My understanding from gistub bootstrap is that there is much harder coding than fewer variables, and this explains most of the problem.

Answer 2

With css you can:

body { zoom: 75%; } 

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

and What does “scaling” do in CSS?

It looks like Firefox may scale up (as of August 2013).

Answer 3

The answer to your question: YES - at least for fonts, and if you code your CSS correctly. See the last part of my answer for non-fonts, which is much more complicated.

The only CSS line that can control all font sizes:

 body { font-size: small; } 

Many designers will encode css using pixel sizes because they like strict control. However, there is a problem with this - Internet Explorer (all of them prior to IE9) does not allow you to override the text size when using pixel units. The ability to adjust the text size is important for people with poor eyesight (i.e. Someone 40 plus due to presbyopia - a large percentage of the population - think, baby boomers).

CSS supports absolute size keywords (shirt sizes):

• xx small
• x mala
• little
• middle
• large
• x-big
• xx big

which have an approximately 1.5 scale factor between each size. A small keyword is usually around 12 pixels, but there are several options between browsers.

Once you have determined your base size (usually “small”), you can use percentages to determine the relative sizes of the base that you will need throughout the layout. For example, if you want the H1 elements to be slightly larger, you simply did:

 h1 { font-size: 150%; } 

Thus, a percentage can be assigned to any element, and you can make it larger or smaller than the base that you set for the body. Not too difficult, and for your question, the size of the entire document can be adjusted using a single CSS value.

There are other bad news and good news.

The bad news is that nested elements inherit their values ​​from their parent containers. Therefore, if we installed #container to have 95% of the base size, and then we had an H1 element in this container that was set at 150%, then H1 will actually be 150% of 95% (which is 1.5 x 0.95 = 1.425, and 142.5% - not 150%). It can be difficult when you have a lot of nesting of different sizes.

The good news is that rems ("root em") are available, and using rems means that the text size always has a size relative to the base (root) font size, so there is no longer any need for math if you use rems to determine the sizing.

Regarding non-fonts, this is a good question. I would suggest that you probably have to use percent definitions in CSS rather than pixel definitions if you want elements that don't have fonts to increase / change accordingly.