为什么Twitter Bootstrap使用像素字体大小?

时间:2012-10-21 15:34:23

标签: twitter-bootstrap mobile fonts responsive-design font-size

鉴于Twitter Bootstrap旨在提供响应/设备友好,为什么不使用相对字体大小?

5 个答案:

答案 0 :(得分:128)

好吧它们似乎是hiding behind the browser zoom excuse。真的很伤心看到这样一个频繁使用的,有影响力的框架,完全忽略可访问性问题和响应式设计的根本基石。他们处于极为重要的地位,不幸的是,他们似乎无意采取相应的行动。

[更新]今天Mark Otto回复了我上面引用的主题。可以预见的是,没有提及“像素完美”这一短语的可访问性和使用:

  

好的,所以这里有一些关于昔日决定的背景知识   并计划前进。

     

像素为每个像素提供绝对控制和一致的渲染   浏览器。

     

设计师仍主要以像素为基础进行思考和操作。

     

浏览器   这些天扩展整个页面,所以它不是类型的问题   缩放或任何东西。

     

历史上嵌入ems一直很痛苦,并且可能需要额外的数学计算/预期像素值。

     

混合测量单位很难看,而我内心的OCD讨厌它。   通常不鼓励在线高上使用单位,但立即提供   了解计算值是什么。我们可能会尝试引导   远离这个在未来。   在未来,我们可能会使用ems进行类型调整,甚至可以使用ems,但不能用于其他任何内容。这对于输入等的字体大小也是有争议的。这并不是人们如何建立像素完美的网站。

     

这有点全部,希望足够连贯。我会尝试在这些变化发布时对这些变化进行博客,但我不确定3.0的接近程度以及将会带来什么变化。

我建议任何对此有强烈感受的人和+1 this thread

[更新] V2.3 release blogpost中的V3路线图未提及添加对ems的支持。

[更新]有关拉动请求here中可用的Bootstrap V3的更多信息,包括Mark Otto的以下内容:

  

我们探讨了使用rem单位而非像素,但发现收效甚微   抵消其使用的影响。 IE8仍然需要一个像素   后备,这是很多重复的代码行。而且,使用   无处不在,而不是像素会加剧这个问题。   混合使用rems和像素似乎现在也没有意义。   但是,我们可以并将继续在将来的版本中对此进行评估。

然后最近(在其评论中):

  

我非常怀疑在这一点上我们将与rems一起发货。更改   除了font-sizes之外的所有东西都是一项艰巨的任务,并且随之而来   抵消这一点的好处很少。将字体大小的代码行加倍   除此之外,以任何其他方式支持rems充其量只是单调乏味。那   说,我们可以在将来的版本中重新访问。现在,我们是   坚持像素。

对大量的Bootstrap功能不满意,尤其是缺少支持em的功能,我强烈建议您查看Susy是否只需要网格,或者Zurb Foundation 4整个辣酱玉米饼馅。不要让Bootstrap的受欢迎程度成为你的判断。任何人都可以使用Bootstrap构建一些东西,这正是它的问题 - 它专为拥有最少网络体验的人设计。仅仅因为世界上有很多麦当劳,并不意味着它是一个健康的食物。

[编辑]好的。这是一个愚蠢的说法。自从我写这篇文章以来,我已经使用了BS3,它已经大大增加了它的游戏。我不应该做出如此一次性的评论,但我仍然相信它在使用像素进行字体大小调整时做出了错误的决定。除了可访问性问题,ems在其他方面也很有用。

[更新]看起来V4(来自here引用的Mdo)支持rems

  

对于接下来的人,我们将能够从像素更改为REM   在v4中我们放弃IE8支持。在那之前做不了多少。

[2017年2月更新] Bootstrap 4仍处于Alpha状态,但在其Typography docs中显示使用了rems,但 显示在其layout docs中使用了rems }。

答案 1 :(得分:10)

  

不要让Bootstrap的受欢迎程度成为你的判断。任何人都行   使用Bootstrap构建一些东西,这正是它的问题 - 它是   专为网络体验极少的人设计。只是因为那里   世界上很多麦当劳并不意味着它是一个健康的地方   吃。

你可以争辩说不要让它以负面的方式掩盖你的判断。这是一个坚实的框架,如果你懒得把时间投入到如何有效地使用它,你的大部分论点都落在它的头上。

虽然它经常被经验极少的人使用 - 而且没有任何问题 - 它也被具有很多经验的人使用。

至少,它是一种非常宝贵的原型制作工具。在最好的情况下,它是完全可定制的。您可以选择,修改,添加 - 这就是它被称为“框架”的原因。

我已经在我的一些项目中有效地使用了它超过两年 - 它就像你想要的那样精益求精。我只使用了表单框架,网格,整个代码库,并根据我的需求进行了自定义。在很多方面,它“提升”了我的游戏,让我进一步进行预处理,使用变量,磨练我构建项目的方式。

是的,有一些问题。 px表示字体大小,使用Less是两个。 但是,因为它是完全开源的,所以您可以找到可以轻松解决这两个问题的选项。

我调查了Foundation,并且喜欢我所看到的内容,但我不得不像许多开发者一样支持IE8。基金会已经放弃了对IE8的支持,这对我来说是“不行”。尽管如此,我不打算忽略整个框架,特别是 free 使用和 free 仅基于一些问题进行修改的东西!

哎呀,在一个项目中,我取消了Foundation的部分内容和部分Bootstrap,并添加了我自己的自定义代码 - 这就是开源之美。

答案 2 :(得分:6)

如果你仍然喜欢使用em和rem支持的Bootstrap,你可以看看这个 - https://github.com/ivayloc/twbs-rem-em没有必要进行任何计算来转换rem或em单位的像素,有{{1对于此 - @mixins - 也可以回退到px,对于em转换,您可以使用@include rem(property, values)

答案 3 :(得分:1)

虽然我广泛使用Bo​​otstrap,但有一些领域的可访问性会受到反击。我猜这个平台的使用范围非常广泛,这是不可避免的权衡。

我完全明白为什么他们选择保留font-size的像素。用于框架字体的em的继承问题是一场彻头彻尾的噩梦。

rems是另一种选择,但浏览器支持仍然存在问题。

您可以创建自己的rems mixin并替换使用基本字体大小变量的每行less。

这就是引导程序的美妙之处 - 以及类似它的框架 - 它是一个可靠的基础。

是的,我已经提到过twitter bootstrap的元素不可访问 - 一个小例子,使用'display:none'而不是使用clip。我非常确定这是有正当理由的 - 如果你愿意的话,你可以很容易地修改它。

Bootstrap并非完美无缺,但是,我怀疑它是否有意成为您所有要求的最终答案。它是一个基础 - 一个'引导程序' - 学习它并正确使用它,添加它,混合它 - 至少,它是一个很棒的框架,用于原型化,或者将一个快速站点组合在一起。更进一步,其中有一些非常扎实的基础可以应用于任何网站。

答案 4 :(得分:0)

我认为,这是因为桌面的第一种方法。 Twitter Bootstrap响应友好,但“优雅降级”的方法。