【问题标题】:Zoomed-out sizing in twitter bootstrap?推特引导程序中的缩小尺寸?
【发布时间】:2013-08-30 23:21:47
【问题描述】:

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

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

Bootstrap 是否有一个 CSS 值(或其中的一小部分),我可以在某个地方进行更改以产生类似缩放和调整大小的效果?我意识到设置缩放本身更多的是浏览器问题,所以我也不想那样硬编码。

编辑

答案可能更接近于这个:

Setting max width for body using Bootstrap

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

【问题讨论】:

    标签: css twitter-bootstrap less


    【解决方案1】:

    使用 css 你可以做到:

    body {
        zoom: 75%;
    }
    

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

    What Does 'zoom' do in CSS?

    目前 Firefox 可能不支持缩放(截至 2013 年 8 月)。

    【讨论】:

      【解决方案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%;
      } 
      

      因此,任何元素都可以分配一个百分比,您可以使其大于或小于您为 body 设置的基数。不太难,根据您的问题,可以通过单个 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 中使用百分比定义而不是像素定义。

      【讨论】:

      • 谢谢,这很好地解释了如何使用字体大小,但这并没有解决我所询问的 twitter-bootstrap 框架,它使用了固定和相对大小的组合。有很多 .less 设置隐藏在那头野兽的肠子里,我正在寻找可以复制缩放的设置。这是引导文档页面,如果您有兴趣:twitter.github.com/bootstrap
      • 谢谢。但不要忘记 Bootstrap 是由 LESS 生成的。
      • 在 Bootstrap 源代码的 variables.less 中,基本字体大小由 \@baseFontSize 定义 - 当前设置为 14px。而all 其他字体大小均来自\@baseFontSize。我确实尝试过使用 \@baseFontSize small 进行构建;但构建失败 - 大概是因为它无法从非数字值进行数学运算。
      【解决方案3】:

      答案是否定的,在引导设置中没有单一、简单的方法可以做到这一点,即使从 LESS 重新编译已经在桌面上。

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

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

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

      而且它似乎只是破坏了导航栏。我从引导 github 的理解是,硬编码的数量比较少的变量所暗示的要多得多,这也是问题的主要原因。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-04-15
        • 1970-01-01
        • 2017-12-21
        相关资源
        最近更新 更多