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

Question

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

twitter-bootstrapmobilefontsresponsive-designfont-size

104

考虑到 Twitter Bootstrap 的设计旨在响应各种设备，为什么它不使用相对字体大小？

- Undistraction

5个回答

11

不要让 Bootstrap 的流行蒙蔽了你的判断力。任何人都可以使用 Bootstrap 来构建网站，这正是它的问题所在——它是为那些缺乏网页开发经验的人而设计的。世界上有很多麦当劳并不意味着它是一个健康的餐厅。

你可以认为不要用消极的方式来看待 Bootstrap。它是一个很好的框架，如果你愿意花时间去学习如何有效地使用它，那么大部分争论都没有意义。

虽然它通常被那些缺乏经验的人使用——这并没有什么不好——但也被那些非常有经验的人使用。

至少，它是一个非常有价值的原型工具。而在最好的情况下，它是完全可定制的。你可以挑选和修改，添加东西——这就是为什么它被称为“框架”。

我已经在我的一些项目中有效地使用它超过两年了——它可以像你想要的那样精简。我曾经只使用表单框架、只使用网格、整个代码库，并将其定制以适应我的需求。在很多方面，它提高了我的水平，让我更深入地进行预处理，使用变量，优化项目结构。

是的，存在一些问题。使用px来定义字体大小以及使用Less是其中两个问题。不过由于它完全开源，你可以很容易地找到解决这两个问题的选项。

我调查了Foundation并且很喜欢它，但是我非常不幸地必须支持IE8，就像许多开发者一样。Foundation已经停止支持IE8，所以对我来说是不可用的。尽管如此，我并不会仅仅因为几个问题而放弃整个框架，尤其是一个可以免费使用和修改的框架！

事实上，在一个项目中，我使用了Foundation和Bootstrap的部分代码并添加了自己的自定义代码——这就是开源的美妙之处。

- Matthew Trow

6

这是完全合理的，说实话，我认为Bootstrap 3已经在其功能方面迈出了重要的一步。回想起来，我当时说这话有点愚蠢，但那是出于挫败感，我仍然认为大多数使用Bootstrap的网站都非常懒惰。它是一个很好的原型设计工具和内部页面（例如管理区域）的工具。如果使用者了解如何超越默认样式，它也可以成为公开面向的网站的好工具。像任何工具一样，它很容易被滥用，我想易用性就是导致（滥用）使用量增加的原因之一。 - Undistraction

2

是的，我明白你的感受 - 有时候你会因为编程而感到愤怒，然后就发泄出来了 :) 至少，在滥用 Bootstrap 3.0 时，还有一些规范可循。Foundation 也是如此。从两者中都可以学到很多东西。最终，如果有时间，“自己动手”才是前进的道路。 - Matthew Trow

2

在另一个答案上发表评论来回答问题有点令人困惑...（仅供参考） - e-sushi

很高兴看到这里有些平衡 :) Bootstrap 对于许多人来说都很好用，无论是经验丰富的人还是新手。 - Aaria Carter-Weir

这并没有回答问题。 - Greg Schmit

6

如果您仍然喜欢带em和rem支持的Bootstrap，您可以查看这个 - https://github.com/ivayloc/twbs-rem-em。不需要进行任何计算来将像素转换为rem或em单位，其中内置有@mixins - @include rem(property, values) - 用于此目的，同时还具有针对px的后备和用于em转换的em(value)。

- ivayloc

我不再使用TBS，因为我发现Foundation更加周全，但是这看起来是一个很好的折中方案。 - Undistraction

1

虽然我广泛使用Bootstrap，但有一些地方无法保证可访问性。我想这是一个不可避免的平台，因为它被如此广泛地使用。

我完全理解他们选择保留像素字体大小的原因。使用em作为框架字体的继承问题是一个彻头彻尾的噩梦。

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

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

这就是Bootstrap的美妙之处 - 以及像它这样的框架 - 它是一个坚实的基础。

是的，我提到了Twitter Bootstrap中不太可访问的元素 - 一个小例子是使用“display：none”而不是使用clip。我非常确定这背后有一个有效的原因 - 而且如果您想要，您可以很容易地修改它。

Bootstrap并不完美，但我怀疑它从来没有打算成为您所有需求的最终答案。它是一个基础 - 一个“引导”，学习并正确利用它，添加内容，混合在一起 - 至少，它是一个很棒的框架，用于原型设计或快速构建网站。更进一步地说，在其中有一些非常坚实的基础可以应用于任何网站。

- user2584840

1

我认为 Bootstrap 的讽刺之一是它所做的远不止于“引导”你的应用程序。它在很多层面上都是规范性的，尤其是布局方面。除了懒惰，许多网站明显基于 Bootstrap 的原因是很难摆脱默认设置。是的，有一些变量可以自定义，但令人讨厌的特定性问题会使覆盖其他方面成为一个巨大的头痛。也许 Bootstrap 3 会更好。就个人而言，我喜欢 Foundation 4。它让我感觉像是我在掌控，而不是框架在掌控。 - Undistraction

0

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

- gocsp

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Undistraction · Accepted Answer

很明显，他们正在使用浏览器缩放的借口来隐藏自己。看到如此广泛使用和有影响力的框架完全忽视无障碍问题和响应式设计的基本支柱真是令人难过。他们处于一个伟大的责任位置，但不幸的是似乎没有意图按照要求行事。

[更新] 今天Mark Otto在我上面提到的帖子中回复了。可预见的是，没有提到无障碍性，而是使用了“像素完美”的说法。

好的，这里是有关过去决策和未来计划的背景简介。

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

设计师们仍然大多数以像素为单位思考和操作。

现在浏览器可以缩放整个页面，因此不必担心字体缩放或其他问题。

历史上嵌套em元素一直很麻烦，并且可能需要额外的数学计算来确定像素值。

混合度量单位很丑陋，我内心的强迫症讨厌它。在行高上使用单位通常是不鼓励的，但可以立即知道计算出的值。我们将来可能会尝试避免这种情况。

将来，我们可能会使用em作为字体大小的度量单位，甚至可能是rem，而不是其他任何东西。但是对于输入框等元素的字体大小是否也应该使用em进行度量，则存在争议。这只是不符合构建像素完美网站的方式。

以上内容有些杂乱无章，但希望足够连贯。随着变化的逐步展现，我们将尝试发布博客文章进行详细解释，但我还不确定3.0版本会离我们多近，以及那会包含哪些内容。

我建议所有对此有强烈感受的人前往+1这个帖子。

[更新] V2.3发布博客文章中概述了V3路线图，未提及添加ems支持。

[更新] 在这里的拉取请求中提供了更多关于Bootstrap V3的信息，包括来自Mark Otto的以下内容:

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

最近（在评论中）：

我非常怀疑我们会在这一点上使用rems。改变除字体大小之外的所有内容是一项巨大的任务，并且几乎没有任何好处可以抵消它带来的影响。除了字体大小之外，双倍行代码的支持rems似乎很繁琐。话虽如此，我们总可以在以后的版本中重新考虑。现在，我们仍然坚持使用像素。

由于对Bootstrap的许多特性感到不满意，尤其是它缺乏em-support，因此我强烈建议如果你只想要网格，请看看 Susy ，或者如果你想要整个enchilda，请看看 Zurb Foundation 4 。不要让Bootstrap的流行影响你的判断。任何人都可以使用Bootstrap构建某些东西，这正是它的问题-它设计用于具有最少网络经验的人。世界上有很多麦当劳并不意味着那是一个健康的地方吃饭。

[编辑] 好的。这是一个愚蠢的话。自从我写了这篇文章以来，我已经使用了BS3，并且它的表现有了很大的提升。我不应该随意评论，但我仍然相信，在字体大小方面使用像素是一个糟糕的决定。除了可访问性问题外，em在其他方面也十分有用。

[更新] 看起来rems将会在V4中得到支持（Mdo从这里引用）：

对于那些跟进的人，当我们放弃IE8支持时，我们将能够从像素转换为REMs。在那之前无能为力。

[更新Feb'17] Bootstrap 4仍处于Alpha版本，但其Typography文档中显示使用了rems，但layout文档中没有显示使用rems。