2012-12-05 71 views
4

我喜欢所有项目的大小使用twitter引导时(在我的浏览器中)我缩小了两次,CTRL - ,CTRL - ,而不是默认值,按Ctrl + 0查看。在twitter引导中缩小尺寸?

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

Bootstrap是否有一个CSS值(或它们的一小部分),我可以在某处产生类似这样的缩放和大小调整?我意识到设置缩放本身更多的是浏览器问题,所以我宁愿不用这种方式对它进行硬编码。

编辑

答案可能是接近这个:

Setting max width for body using Bootstrap

......这表明没有?我必须重新编译bootstrap?

回答

2

答案是NO,即使从LESS重新编译到桌面上,在引导设置中也没有单一简单的方法来完成此操作。

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

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

  • variables.less
  • media.less
  • layouts.less
  • 响应1200分钟

它似乎只是打破了导航栏。我从bootstrap github得到的理解是,相对于变量较少的变量,硬编码有相当多的硬编码,这就解决了很多问题。

1

您的问题的答案是YES - 至少对于字体和适当编码您的CSS。看到我的答案的后半部分非字体是非常棘手的。

CSS,可以控制所有字体大小的单行是:使用像素大小,因为他们喜欢的严格控制

body { 
    font-size: small; 
} 

许多设计师将编写CSS。然而,这有一个问题 - Internet Explorer(它们一直到IE9)不允许在使用像素单元时覆盖文本大小。调整文字大小的能力为必备对于视力不好的人(即任何40岁以上的老花眼患者 - 大部分人群 - 认为婴儿潮一代)。

CSS支持绝对大小的关键字(一拉短衫大小):

  • XX-小
  • 的x小
  • 介质
  • X-大
  • xx-large

它们在每个尺寸之间具有大约1.5的缩放因子。 关键字通常约为12像素,但浏览器之间有一些差异。

一旦你定义了你的基本尺寸(它通常是'小'),那么你可以使用百分比来定义你在整个布局中需要的相对基本尺寸。例如,如果你想H1元素是相当大一点,那么你会简单地做:

h1 { 
    font-size: 150%; 
} 

所以任何元素都可以指定一个百分比,你可以把它比您已设置为基本更大或更小身体。不要太难,并根据您的问题,整个文档字体大小可以通过一个CSS值进行调整。

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

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

的好消息是,雷姆('根EM的)都可以使用REMS意味着文本大小始终尺寸相对到基地(根)字体大小 - 如果你使用这样不需要更多的数学重新定义大小。

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

+0

谢谢,这是如何使用字体大小的一个很好的解释,但是这并没有解决我所问的twitter-bootstrap框架,它使用了固定尺寸和相对尺寸的组合。这些野兽的肠子里隐藏着很多无数的设置,我正在寻找复制变焦的设置。这里是引导文档页面,如果你有兴趣:http://twitter.github.com/bootstrap/ – Mittenchops

+0

谢谢。但别忘了Bootstrap是由LESS制作的。 – timbo

+0

在Bootstrap源文件中的variables.less中,基本字体大小由\ @baseFontSize定义 - 当前设置为14px。 *所有*其他字体大小均来自\ @baseFontSize。我确实尝试了使用\ @baseFontSize small的构建;但构建失败 - 大概是因为它无法从非数字值中进行数学运算。 – timbo