在Twitter bootstrap中缩小尺寸?

时间:2012-12-05 21:13:01

标签: css css3 twitter-bootstrap less

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

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

Bootstrap是否只有一个CSS值(或一小部分),我可以在某处生成像这样缩放和大小调整的东西?我意识到设置缩放本身更像是一个浏览器问题,所以我不想用这种方式硬编码。

修改

答案可能更接近于此:

Setting max width for body using Bootstrap

......这表明不是吗?我必须重新编译bootstrap?

3 个答案:

答案 0 :(得分:14)

用css你可以做到:

body {
    zoom: 75%;
}

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

What Does 'zoom' do in CSS?

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

答案 1 :(得分: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%;
} 

因此,可以为任何元素指定百分比,并且可以使其大于或小于您为正文设置的基础。不太难,根据您的问题,整个文档字体大小可以通过单个CSS值进行调整。

还有一些坏消息和好消息。

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

好消息是rems('root em's)可用并且使用rems意味着文本大小总是相对到基本(root)字体大小 - 所以不再需要数学如果使用rems定义大小,则需要。

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

答案 2 :(得分:2)

答案是否定的,即使从LESS重新编译就在桌面上,也没有一种简单的方法可以在引导程序设置中执行此操作。

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

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

  • variables.less
  • media.less
  • layouts.less
  • 响应-1200-min.less

它似乎只打破了导航栏。我对bootstrap github的理解是,与变量建议相比,硬编码的数量要多得多,这也解决了很多问题。