104

鉴于 Twitter Bootstrap 被设计为响应式/设备友好型,为什么它不使用相对字体大小?

4

5 回答 5

129

好吧,他们似乎是躲在浏览器缩放的借口后面。看到如此大量使用和有影响力的框架完全忽略了可访问性问题和响应式设计的基本基石,真的很难过。他们负有重大责任,不幸的是,他们似乎无意采取相应的行动。

[更新] 所以今天马克奥托回复了我上面引用的线程。可以预见的是,没有提及“像素完美”一词的可访问性和使用:

好的,这里有一些关于过去的决定和前进计划的背景。

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

设计师仍然主要以像素为单位进行思考和操作。

如今,浏览器会放大整个页面,因此类型缩放或其他任何东西都不是问题。

从历史上看,嵌套 em 一直很痛苦,并且可能需要额外的数学运算来计算图形/预期像素值。

混合测量单位是丑陋的,我内心的强迫症讨厌它。通常不鼓励在 line-height 上使用单位,但可以立即了解计算的值是什么。我们将来可能会尝试避开这种情况。将来,我们可能会使用 ems 来确定字体大小,甚至可能使用 rems,但不会用于其他任何东西。这对于输入等的字体大小也是有争议的。这不是人们建立像素完美网站的方式。

这有点结束了,希望足够连贯。随着这些变化的出现,我将尝试在博客中介绍这些变化,但我不确定 3.0 有多接近以及这一切将带来什么。

我会建议任何对此有强烈感受的人并为此线程+1 。

[更新] V2.3 发布博文中的 V3 路线图没有提及添加对 ems 的支持。

[更新]此处的拉取请求中提供了有关 Bootstrap V3 的更多信息,包括来自 Mark Otto 的以下内容:

我们探索了在像素上使用 rem 单位,但发现抵消使用它们的影响几乎没有什么好处。IE8 仍然需要一个像素回退,这是很多重复的代码行。此外,在任何地方都使用 rems 而不是像素会加剧这个问题。混合 rems 和像素现在似乎也没有意义。但是,我们可以并且将在未来的版本中继续对此进行评估。

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

我非常怀疑此时我们是否会使用 rems 发货。改变一切——除了字体大小——是一项艰巨的任务,而且几乎没有什么好处可以抵消这一点。除了将字体大小的代码行加倍之外,以任何其他方式支持 rems 似乎充其量是乏味的。也就是说,我们总是可以在未来的版本中重新访问。目前,我们坚持使用像素。

由于对 Bootstrap 的大量功能感到不满意,尤其是它缺乏对 em 的支持,我强烈建议如果您只想要网格,请查看Susy ,或者对于整个 enchilada 使用Zurb Foundation 4 。不要让 Bootstrap 的流行影响你的判断。任何人都可以使用 Bootstrap 构建一些东西,这正是它的问题——它是为网络经验最少的人设计的。仅仅因为世界上有很多麦当劳并不意味着它是一个健康的饮食场所。

[编辑] 好的。说这话很傻。自从我写了这篇文章后,我就使用了 BS3,它大大提升了它的游戏性。我不应该发表这样的一次性评论,但我仍然认为它在使用像素来调整字体大小方面做出了错误的决定。除了可访问性问题外,em 在其他方面也很有用。

[更新] V4 中似乎将支持rems (Mdo 引用自此处):

对于那些后续,当我们放弃 IE8 支持时,我们将能够在 v4 中从像素更改为 REM。在那之前不能做太多事情。

[2017 年 2 月更新] Bootstrap 4 仍处于 Alpha 阶段,但在其Typography docs中显示了 rems 的使用,但在其layout docs中没有显示 rems 的使用。

于 2012-10-30T10:42:29.883 回答
11

不要让 Bootstrap 的流行影响你的判断。任何人都可以使用 Bootstrap 构建一些东西,这正是它的问题——它是为网络经验最少的人设计的。仅仅因为世界上有很多麦当劳并不意味着它是一个健康的饮食场所。

你可以争辩说不要让它以消极的方式影响你的判断。这是一个可靠的框架,如果您花时间在如何有效地使用它上,那么您的大部分论点都落在了它的头上。

虽然它经常被经验最少的人使用——这并没有错——但它也被经验丰富的人使用

至少,它是一个非常宝贵的原型设计工具。充其量,它是完全可定制的。你可以挑选、修改、添加——这就是它被称为“框架”的原因。

两年多来,我一直在我的一些项目中有效地使用它——它就像你想要的那样精简。我只使用了表单框架、网格、整个代码库并对其进行了定制以满足我的需求。在很多方面,它“提升”了我的游戏水平,让我更深入地进行预处理、使用变量、磨练我构建项目的方式。

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

我调查了Foundation并喜欢我所看到的内容,但不幸的是,我不得不支持 IE8,就像许多开发人员一样。Foundation 已经放弃了对 IE8 的支持,这对我来说是“不行”。尽管如此,我并不打算放弃整个框架,尤其是仅基于几个问题就可以免费使用和自由修改的框架!

哎呀,在一个项目中,我提升了 Foundation 的一部分和 Bootstrap 的一部分,并添加了我自己的自定义代码——这就是开源的美妙之处。

于 2013-11-01T14:05:24.363 回答
6

如果您仍然更喜欢带有 em 和 rem 支持的 Bootstrap,您可以看看这个 - https://github.com/ivayloc/twbs-rem-em无需进行任何计算来转换以 rem 或 em 为单位的像素,有内置的@mixins-@include rem(property, values)也可以使用 px 和 em 转换em(value)

于 2014-07-08T12:26:08.173 回答
1

虽然我广泛使用 Bootstrap,但在某些领域,可访问性并不重要。我想对于一个使用如此广泛的平台,不可避免地要进行权衡。

我完全明白为什么他们选择为字体大小保留像素。框架字体的 em 继承问题简直就是一场噩梦。

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

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

这就是引导程序的美妙之处——以及类似的框架——它是工作的坚实基础。

是的,我已经提到 twitter bootstrap 的一些元素不是那么容易访问的 - 一个小例子,使用“display:none”而不是使用剪辑。我很确定这是有正当理由的——而且,如果你愿意,你可以很容易地修改它。

Bootstrap 并非完美无缺,但是,我怀疑它是否曾经打算成为您所有要求的最终答案。它是一个基础 - 一个“引导程序” - 学习并正确使用它,添加它,混合它 - 至少,它是一个很棒的框架,可以用来制作原型,或者拼凑一个快速网站。更进一步,其中有一些非常坚实的基础可以应用于任何网站。

于 2013-07-15T19:32:56.813 回答
0

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

于 2012-10-21T16:29:06.807 回答