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

Why does Twitter Bootstrap Use Pixels for Font Size?

提问by Undistraction

Given that Twitter Bootstrap is designed to be responsive / device-friendly, why doesn't it use relative font sizes?

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

回答by Undistraction

Well it seems that they are hiding behind the browser zoom excuse. Really sad to see such a heavily used and influential framework completely ignore accessibility issues and a fundamental cornerstone of responsive design. They are in a position of great responsibility and unfortunately seem to have no intention of acting accordingly.

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

[Update] So today Mark Otto replied on the thread I referenced above. Predictably there is no mention of accessibility and use of the phrase 'pixel-perfect':

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

Okay, so here's a bit of a background on the decisions of yesteryear and plans for moving forward.

Pixels provide absolute control and consistent rendering across every browser.

Designers still mostly think and operate in pixels.

Browsers scale up entire pages these days, so it's not an issue with type scaling or anything.

Nesting ems historically has been a pain and can require extra math for figure computed/intended pixel values.

Mixing units of measurements is ugly and my inner OCD hates it. Using units on line-height is generally discouraged, but provides immediate knowledge of what the computed value is. We'll probably try to steer away from this in the future. In the future, we'll likely use ems for type sizing, perhaps rems even, but not for anything else. This is also debatable on font sizes for inputs and the like. It's just not how folks build pixel perfect sites.

That's a bit all over and hopefully coherent enough. I'll try to blog about these changes as they come up more, but I'm unsure how close 3.0 is and what that will all entail yet.

好的，这里有一些关于过去决策和未来计划的背景。

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

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

如今，浏览器会放大整个页面，因此类型缩放或任何事情都不是问题。

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

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

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

I would suggest anyone with strong feelings about this go and +1 this thread.

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

[Update] V3 roadmap oulined in V2.3 release blogpostmakes no mention of adding support for ems.

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

[Update] Lots more information about Bootstrap V3 available in the pull request hereincluding the following from Mark Otto:

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

We explored the use of rem units over pixels, but found little benefit to offset the implications of their use. IE8 would still need a pixel fallback, and that's a lot of duplicate lines of code. Moreover, using rems everywhere instead of pixels would exacerbate that problem. Mixing rems and pixels doesn't seem to make sense either right now. However, we can and will continue to evaluate this in future releases.

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

Then more recently (in its comments):

然后最近（在其评论中）：

I highly doubt we'll be shipping with rems at this point. Changing everything—beyond font-sizes—is a huge task and one that comes with few benefits to offset that. Double the lines of code for font-sizes aside, supporting rems in any other way seems tedious at best. That said, we can always revisit in a future release. For now, we're sticking with pixels.

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

Having grown dissatisfied with a large number of Bootstrap's features, not least of which is it's lack of em-support, I strongly suggest looking at Susyif you just want grids, or Zurb Foundation 4for the whole enchilada. Don't let Bootstrap's popularity cloud your judgement. Anyone can build something with Bootstrap, which is exactly its problem - it's designed for people with minimal web-experience. Just because there are lots of McDonalds' in the world doesn't mean it's a healthy place to eat.

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

[Edit] OK. This was a silly thing to say. Since I wrote this, I've used BS3 and it has upped its game considerably. I shouldn't have made such a throwaway comment, but I still believe that it has made a bad decision in using pixels for font-sizing. As well as accessibility issues, ems are useful in other ways.

[编辑] 好的。这是一件很愚蠢的事情。自从我写这篇文章以来，我一直在使用 BS3，它的游戏性能有了很大的提升。我不应该做出这样的一次性评论，但我仍然认为使用像素来调整字体大小是一个错误的决定。除了可访问性问题，ems 在其他方面也很有用。

[Update] Looks like rems willbe supported in V4 (Mdo quoted from here):

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

For those following along, we'll be able to change from pixels to REMs in v4 when we drop IE8 support. Can't do much until then.

对于接下来的内容，当我们放弃 IE8 支持时，我们将能够在 v4 中从像素更改为 REM。在那之前不能做很多事情。

[Update Feb '17] Bootstrap 4 is still in Alpha, but shows use of rems in its Typography docs, but doesn'tshow use of rems in its layout docs.

[更新二月'17]引导4仍处于Alpha，但显示在其使用的REM排版文档，但并不表明使用其REMS的布局文档。

回答by Matthew Trow

Don't let Bootstrap's popularity cloud your judgement. Anyone can build something with Bootstrap, which is exactly its problem - it's designed for people with minimal web-experience. Just because there are lots of McDonalds' in the world doesn't mean it's a healthy place to eat.

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

You could argue not to let it cloud your judgement in a negative way. It's a solid framework and if you bother to invest the time into how to use it effectively, the majority of your argument falls on it's head.

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

Whilst it's often used by people with minimal experience - and there's nothing wrong with that - it's also used by people with a lotof experience.

虽然它经常被人以最小的经验-并没有什么错-它也被人们提供了大量的经验。

At very least, it's an invaluable prototyping tool. At very best, it's completely customisable. You can pick and choose, modify, add to - which is why it's called a 'framework'.

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

I've been using it effectively on some of my projects for over two years - it's as lean as you want it to be. I've used just the form framework, just the grids, the entire codebase and customised it to suit my needs. In many ways, it's 'upped' my game, getting me further into preprocessing, using variables, honing the way I structure projects.

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

Yes, there are some issues. pxfor font sizes and using Lessare two. However, because it's entirely open source, you can find options to remedy both of those easily.

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

I investigated Foundationand liked what I saw, but I'm in the unfortunate position of having to support IE8, as many devs are. Foundation has dropped support for IE8, making it a 'no go' for me. Despite this, I'm not about to dismiss an entire framework, most specifically something that is freeto use and freeto modify based solely on a few issues!

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

Heck, in one project, I lifted parts of Foundation and parts of Bootstrap and added my own custom code - that's the beauty of open source.

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

回答by ivayloc

If you still prefer Bootstrap with em and rem support you can take a look at this - https://github.com/ivayloc/twbs-rem-emthere is no need to make any calculation to convert pixels in rem or em units, there is build in @mixinsfor this - @include rem(property, values)- also fallback to px and for em convertion you can use em(value).

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

回答by user2584840

Whilst I use Bootstrap extensively, there's a few areas where accessibility takes the back burner. I guess there's inevitable trade-offs with a platform that's used so extensively.

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

I completely get why they've opted to retain pixels for font-size. The inheritance issues with em's for a framework's fonts are a total nightmare.

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

rems are an alternative option, but browser support is still problematical.

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

You could create your own rems mixin and replace every line of less which uses the base font size variable.

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

That's the beauty of bootstrap - and frameworks like it - it's a solid base to work from.

这就是 bootstrap 的美妙之处——以及类似的框架——它是一个坚实的工作基础。

Yes, I've mentioned there's elements to twitter bootstrap which aren't that accessible - one small example, the use of 'display: none' instead of using clip. I'm pretty damn sure there's a valid reason for this - and again, you can very easily modify this if you want.

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

Bootstrap isn't flawless, but then, I doubt it was ever intended to be the final answer to all your requirements. It's a base - a 'bootstrap' - learn it and utilise it properly, add to it, mix it all up - at the very least, it's an awesome framework to prototype with, or to throw together a quick site. Going further, there's some really solid groundwork within that can be applied to anywebsite.

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

回答by gocsp

i think, its because of the desktop first approach. Twitter Bootstrap is responsive friendly, but "graceful degradation" approach.

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