为什么 Twitter Bootstrap 使用像素作为字体大小? [英] Why does Twitter Bootstrap Use Pixels for Font Size?

问题描述

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

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

推荐答案

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

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.

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

[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':

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

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.

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

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

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

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.

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

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.

我会建议任何对此有强烈感受的人去 +1 这个主题.

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

[更新] V3 路线图包含在 V2.3 版本中博文没有提到添加对 em 的支持.

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

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

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

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

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.

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

Then more recently (in its comments):

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

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.

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

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 Susy if you just want grids, or Zurb Foundation 4 for 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.

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

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.

[更新] 看起来在 V4 中将支持 rems(Mdo 引用自 此处):

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

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

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.

[2 月 17 日更新] Bootstrap 4 仍处于 Alpha 阶段，但在其 排版文档，但没有在其布局文档.

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

这篇关于为什么 Twitter Bootstrap 使用像素作为字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！