为啥 Twitter Bootstrap 使用像素作为字体大小？

Posted 2023-03-06

【中文标题】为啥 Twitter Bootstrap 使用像素作为字体大小？

【英文标题】：Why does Twitter Bootstrap Use Pixels for Font Size?为什么 Twitter Bootstrap 使用像素作为字体大小？

【发布时间】：2012-10-11 13:04:30

【问题描述】：

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

【参考方案1】：

看来他们是hiding behind the browser zoom excuse。看到如此大量使用且有影响力的框架完全忽略了可访问性问题和响应式设计的基本基石，真的很难过。他们身负重任，不幸的是，他们似乎无意采取相应行动。

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

好的，这里有一些关于过去决策的背景知识 以及前进的计划。

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

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

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

嵌套 em 在历史上一直很痛苦，并且可能需要对图形计算/预期像素值进行额外的数学运算。

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

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

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

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

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

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

然后最近（在它的 cmets 中）：

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

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

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

[更新] V4 中似乎支持 rems （引用自 here 的 Mdo）：

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

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

【讨论】：

问题是这里似乎没有人解释为什么使用 EM 比使用 PX 更“易于访问”。我的意思是好吧，在纸上看起来很明显，但在现实生活中呢？有没有人有用户停留在基于像素的网站上的真实例子？像素导致的真实统计数据和实际问题？我认为这是这场辩论中真正的问题。缺乏证据是大多数人使用 PX 的原因。

有视力问题的人会增加操作系统级别和浏览器级别的字体。这些人需要em，因此是“可访问性”。

这里有一个讨论，它解释了为什么增加字体大小比缩放更好，webaim.org/discussion/mail_thread?thread=5849 “我去年在 CSUN 跟一个人谈过，他指出放大整个页面并不是那么有用对他来说。他的视力很低，他确实需要相当大地增加页面上文本的大小才能阅读它。但是，当您使用页面缩放时，您最终不得不左右滚动才能阅读阅读文本会很快变老。当你不得不这样做时，很容易失去你的位置。”

基于 Em 的尺寸也是移动开发不可或缺的一部分。设备制造商花费金钱和时间来确定最佳基本字体大小，以便在他们的设备上清晰易读。当我们说“字体大小：14 像素”时，我们使所有这些研究无效。这对 UltraAwesomeRetina3.0 意味着什么？还是在每英寸像素较低的 52 英寸屏幕上？将基本字体大小留给制造商是最佳实践，简单明了。filamentgroup.com/lab/…blog.cloudfour.com/…

因为我是（姑且称之为）EM ***者，我喜欢你不断更新这个答案的事实……甚至更多的是你指出了替代方案。 +1 ;)

【参考方案2】：

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

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

虽然它经常被经验最少的人使用 - 这并没有错 - 它也被有很多经验的人使用。

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

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

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

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

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

【讨论】：

这很公平，老实说，使用 Bootstrap 3，我认为它确实加强了它的游戏。回想起来，说起来有点傻，但它是出于沮丧而诞生的，我仍然认为我看到的大多数使用 Bootstrap 的网站都非常懒惰地使用它。它是用于原型设计和非公开页面（管理区域等）的绝佳工具。如果使用它的人了解如何超越其默认设置，它也可以成为面向公众的网站的绝佳工具。像任何工具一样，它很容易被滥用，我认为易用性是导致（ab）使用量的原因。

是的，我听到了 - 有时你只是对编码如此愤怒，你会猛烈抨击:) 至少，在 bootstrap 3.0 被滥用时，有一些标准。这同样适用于基金会。两者都可以学到很多东西。最终，在时间紧迫的情况下，“自己动手”是前进的方向。

发布一个答案来评论另一个答案有点令人困惑......（只是说）

很高兴看到为此带来了一些平衡 :) Bootstrap 适用于很多人，无论是经验丰富的还是新手。

这不能回答问题。

【参考方案3】：

如果你仍然喜欢支持 em 和 rem 的 Bootstrap，你可以看看这个 - https://github.com/ivayloc/twbs-rem-em 不需要进行任何计算来转换 rem 或 em 单位的像素，@mixins 中为此构建了- @include rem(property, values) - 也可以使用 px 和 em 转换，您可以使用 em(value)。

【讨论】：

我不再使用 TBS，因为我发现 Foundation 的考虑要好得多，但是这看起来是一个不错的折衷方案。

【参考方案4】：

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

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

rems 是一个替代选项，但浏览器支持仍然存在问题。

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

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

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

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

【讨论】：

我认为 Bootstrap 的讽刺之处之一是它所做的不仅仅是“引导”您的应用程序。它在很多层面上都有规定，其中最重要的是布局。除了懒惰之外，这么多网站明显基于引导程序的原因是要摆脱默认设置并不那么容易。是的，有一些变量可以自定义方面，但是可怕的特殊性问题使得覆盖其他方面非常令人头疼。也许 Bootstrap 3 会更好。就个人而言，我喜欢 Foundation 4。它让我觉得是我负责而不是框架。

【参考方案5】：

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