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


Answers:


129

好吧,他们似乎躲在浏览器缩放的背后。真的很伤心看到这样一个频繁使用的,有影响力的框架,完全忽略可访问性问题和响应式设计的根本基石。他们负有重大责任,不幸的是,他们似乎无意采取相应行动。

[更新]因此,今天马克·奥托(Mark Otto)对我上面引用的线程进行了回复。可以预见的是,这里没有提到可访问性和使用“像素完美”这一短语:

好的,所以这里有一些过去的决策背景和前进的计划。

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

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

这些天,浏览器可以扩展整个页面,因此类型缩放或其他任何问题都不是问题。

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

混合的度量单位很难看,而我的内部OCD讨厌它。通常不建议在行高上使用单位,但是可以立即了解所计算的值是什么。将来我们可能会设法避免这种情况。将来,我们可能会使用ems来进行类型大小调整,甚至使用rems来进行大小调整,但不会用于其他任何事情。在输入等的字体大小上也有争议。这不是人们如何构建像素完美的网站。

到此为止,并希望足够连贯。随着这些更改的出现,我将在博客中进行介绍,但我不确定3.0的接近程度以及这将带来什么。

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

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

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

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

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

我非常怀疑我们此时是否将带rems。更改除字体大小以外的所有内容都是一项艰巨的任务,并且几乎没有什么好处可以弥补这一点。除了将字体大小增加一倍以外,以其他任何方式支持rems充其量似乎很乏味。也就是说,我们始终可以在将来的版本中进行重新访问。目前,我们坚持使用像素。

我对大量Bootstrap的功能不满意,尤其是缺乏Em-support,因此我强烈建议您查看Susy(如果您只想使用网格),或者是整个enchilada的Zurb Foundation 4。不要让Bootstrap的知名度影响您的判断。任何人都可以使用Bootstrap构建某些东西,这正是它的问题- 它是为那些网络经验最少的人设计的。仅仅因为世界上有许多麦当劳,并不意味着它是一个健康的饮食场所。

[编辑]确定。这是一个愚蠢的话。自从编写此书以来,我一直在使用BS3,并且它的游戏性能得到了极大的提高。我不应该发表这样的评论,但我仍然相信在使用像素进行字体大小调整时,这是一个错误的决定。除可访问性问题外,ems还可以通过其他方式使用。

[更新]看起来V4 支持rems (从此处引用Mdo ):

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

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


4
问题在于,似乎没有人可以解释为什么使用EM比使用PX更“易于访问”。我的意思是,在纸上看起来很明显,但在现实生活中呢?有人在基于像素的网站上贴有用户的真实示例吗?具有像素造成的实际统计信息和实际问题?我认为这是这场辩论中的真正问题。缺乏证据就是为什么大多数人使用PX。
2013年

7
有视觉障碍的人会增加操作系统级别和浏览器级别的字体。em这些人是必需的,因此是“可访问性”。
史蒂文·瓦雄

1
webaim.org/discussion/mail_thread?thread=5849 “ 这里有讨论,解释了为什么字体大小增加比缩放更好” ,“我去年在CSUN上与某人交谈时指出,放大整个页面并没有太大帮助对他来说,他的视力很低,确实需要相当大地增加页面上的文本大小才能阅读,但是,使用页面缩放时,最终必须向左和向右滚动才能阅读文字后,文字很快就会变旧。当您必须这么做时,很容易失去位置。”
托尼2014年

4
基于Em的大小对于移动开发也是必不可少的。设备制造商花费金钱和时间来确定最佳基本字体大小,以使其设备易读。当我们说“ font-size:14px”时,我们将使所有研究无效。在UltraAwesomeRetina3.0上意味着什么??还是较低的像素每英寸离开基地的字体大小由制造商52"屏幕上是一个最佳实践,简单明了。filamentgroup.com/lab/... blog.cloudfour.com/...
杰伊Dansand

3
由于我是EM的狂热分子(所以简称为EM),所以我喜欢您不断更新此答案的事实,甚至更喜欢您指出的替代方案。+1 ;)
e-sushi

11

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

您可以争辩说不要让它以负面的方式笼罩您的判断。这是一个可靠的框架,如果您花时间将精力投入到如何有效地使用它上,您的大部分争论都落在了它的头上。

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

至少,这是一个宝贵的原型制作工具。最好情况下,它是完全可定制的。您可以选择,修改,添加到-这就是为什么它被称为“框架”的原因。

我已经在我的一些项目中有效地使用了两年以上-它像您想要的那样精简。我只使用了表单框架,仅使用了网格,整个代码库,并根据自己的需要对其进行了自定义。在许多方面,它“升级”了我的游戏,使我可以使用变量进一步进行预处理,从而改善了构建项目的方式。

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

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

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


6
说实话,这完全公平,对于Bootstrap 3,我认为它确实提高了游戏水平。回想起来,这有点愚蠢,但它是出于挫折而诞生的,我仍然认为,我看到的大多数使用Bootstrap的网站都非常懒惰地使用它。它是用于原型设计和非公开页面(管理区域等)的好工具。如果使用它的人知道如何设置样式而不是默认样式,它也可以是面向公开站点的好工具。像任何工具一样,它很容易被滥用,我认为易于使用是导致(滥用)大量使用的原因。
不分心

2
是的,我听到了您的声音-有时您对编码如此着迷,然后猛烈抨击:)至少在使用bootstrap 3.0时,滥用了某些标准。基金会也是如此。可以从两者中学到很多东西。最终,如果有时间,“自己动手”是前进的道路。
马修·卓

2
发布一个答案以评论另一个答案有点令人困惑……(只是说)
e-sushi

很高兴看到这带来了一些平衡:) Bootstrap对于许多经验丰富的人和新手来说都很有效。
Aaria Carter-Weir 2015年

这不能回答问题。
格雷格·施密特

6

如果您仍然更喜欢具有em和rem支持的Bootstrap,则可以查看一下-https: //github.com/ivayloc/twbs-rem-em,无需进行任何计算即可将像素转换为rem或em单位,有建立@mixins这个- @include rem(property, values)-也回退到PX和EM皈依你可以使用em(value)


我不再使用TBS,因为我发现Foundation的思想要好得多,但是这似乎是一个不错的折衷方案。
分心2014年

1

虽然我广泛使用Bo​​otstrap,但是在某些区域中,可访问性导致了问题的严重。我猜想,使用如此广泛的平台不可避免地要取舍。

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

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

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

这就是引导程序的魅力所在-以及类似的框架-这是工作的坚实基础。

是的,我已经提到了twitter引导程序中没有的元素可以访问-一个小例子,使用'display:none'而不是clip。我非常确定这是有道理的-再次,您可以根据需要很容易地对其进行修改。

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


1
我认为Bootstrap具有讽刺意味的是,它的作用远不止是“引导”应用程序。它在很多层面上都是规范性的,其中最重要的是布局。除了懒惰之外,如此之多的网站如此明显地基于引导程序的原因还在于,摆脱默认设置并非那么容易。是的,有一些变量可以自定义方面,但是可怕的特异性问题使覆盖其他方面变得非常头疼。也许Bootstrap 3会更好。就个人而言,我喜欢Foundation4。这让我感觉是我在负责而不是框架。
分心

0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.