Почему Twitter Bootstrap использует пиксели для размера шрифта?


учитывая, что Twitter Bootstrap разработан, чтобы быть отзывчивым / удобным для устройства, почему он не использует относительные размеры шрифтов?

5 103

5 ответов:

Ну кажется, что они прячась за браузерным зумом извините. Действительно грустно видеть, что такая широко используемая и влиятельная структура полностью игнорирует проблемы доступности и фундаментальный краеугольный камень адаптивного дизайна. Они находятся в очень ответственном положении и, к сожалению, как представляется, не намерены действовать соответствующим образом.

[Update] поэтому сегодня Марк Отто ответил на тему, на которую я ссылался выше. Предсказуемо нет никакого упоминания о доступности и использование фразы "pixel-perfect":

ладно, вот немного фона на решения прошлых лет и планы на будущее.

пикселы обеспечивают абсолютный контроль и последовательный перевод через каждое браузер.

дизайнеры по-прежнему в основном думают и работают в пикселях.

браузеры масштабирование всей страницы в эти дни, так что это не проблема с Тип масштабирование или что-то еще.

вложенность ems исторически это было болью и может потребовать дополнительной математики для вычисленных/предполагаемых значений пикселей.

смешивание единиц измерения уродливо, и мое внутреннее ОКР ненавидит его. Использование единиц измерения на линейной высоте обычно не рекомендуется, но обеспечивает немедленное знание того, что такое вычисленное значение. Мы, вероятно, попытаемся управлять от этого в будущем. В будущем мы, вероятно, будем использовать ems для калибровки типов, возможно, даже rems, но не для чего-либо еще. Это также спорно на размеры шрифтов для ввода и тому подобное. Это просто не так, как люди строят пиксельные идеальные сайты.

Это немного все кончено и, надеюсь, достаточно связно. Я попытаюсь написать об этих изменениях, когда они появятся больше, но я не уверен, насколько близок 3.0 и что все это повлечет за собой.

Я бы предложил всем с сильными чувствами об этом идти и +1 этой теме.

[обновить] план В3 представлена в V2. 3 release blogpost не упоминает о добавлении поддержки для ems.

[обновление] много дополнительной информации о начальной загрузки В3 доступны в выпадающем запрос здесь включая следующее от Марка Отто:

мы исследовали использование rem единиц над пикселями, но нашли мало пользы чтобы компенсировать последствия их использования. IE8 все равно понадобится пиксель запасной вариант, и это много повторяющихся строк кода. Кроме того, используя rems везде вместо пикселей будет усугубить эту проблему. Смешивание rems и пикселей, похоже, тоже не имеет смысла прямо сейчас. Однако, мы можем и будем продолжать оценивать это в будущих версиях.

потом совсем недавно (в своих комментариях):

Я очень сомневаюсь, что мы будем грузить с rems в этот момент. Изменение все-за пределами размеров шрифта-это огромная задача и тот, который поставляется с мало преимуществ, чтобы компенсировать это. Удвоение строк кода для размеров шрифта в сторону, поддерживая rems внутри любой другой способ кажется в лучшем случае утомительным. Что сказал, Мы всегда можем вернуться в будущем. Сейчас мы прилипание с пикселями.

будучи недовольным большим количеством функций Bootstrap, не в последнюю очередь это отсутствие em-поддержки, я настоятельно рекомендую посмотреть на Сьюзи Если вы просто хотите сетям, или Zurb Foundation 4 за все сразу. Не позволяйте популярности Bootstrap затуманить ваше мнение. Любой может что-то построить с Bootstrap, что именно его проблема -он предназначен для людей с минимальным веб-опытом. Просто потому, что есть много McDonalds' в мире не означает, что это здоровое место, чтобы поесть.

[Edit] OK. Это было глупо говорить. Поскольку я написал это, я использовал BS3, и он значительно повысил свою игру. Я не должен был делать такой одноразовый комментарий, но я все еще считаю, что он принял плохое решение в использовании пикселей для размера шрифта. Так же как проблемы доступности, ems полезны и в других отношениях.

[обновление] выглядит как rems будет поддерживается в V4 (mdo цитируется из здесь):

для тех, кто следит за этим, мы сможем перейти от пикселей к REMs в v4, когда мы отбрасываем поддержку IE8. До тех пор я мало что могу сделать.

[обновление Feb '17] Bootstrap 4 все еще находится в альфа-версии, но показывает использование rems в своем типографика документы, но не показать использование rems в его layout docs.

Не позволяйте популярности Bootstrap затуманить ваше мнение. Любой может построить что-то с Bootstrap, что именно его проблема - это предназначен для людей с минимальным веб-опытом. Просто потому что там много ли Макдональдов в мире не означает, что это здоровое место есть.

вы можете возразить, чтобы не позволить ему затуманить ваше мнение в негативном ключе. Это прочная основа, и если вы потрудитесь инвестировать время в то, как эффективно ее использовать, большинство ваших аргументов падает на его голову.

хотя он часто используется людьми с минимальным опытом - и в этом нет ничего плохого - он также используется людьми с много опыта.

по крайней мере, это бесценный инструмент прототипирования. В лучшем случае, это полностью настраиваемый. Вы можете выбирать, изменять, добавлять - вот почему это называется "фреймворк".

Я использую его эффективно на некоторых из моих проектов уже более двух лет-это так худо, как вы хотите, чтобы это было. Я использовал только структуру формы, только сетки, всю кодовую базу и настроил ее в соответствии с моими потребностями. Во многих отношениях это "подняло" мою игру, заставляя меня дальше заниматься предварительной обработкой, используя переменные, оттачивая то, как я структурирую проекты.

Да, есть некоторые проблемы. px для размеров шрифта и с помощью меньше два. Однако, поскольку это полностью открытый исходный код, вы можете найти варианты для исправления обоих из них легко.

Я исследовал Фонд и понравилось то, что я видел, но я нахожусь в неудачном положении, чтобы поддерживать IE8, как и многие разработчики. Фонд отказался от поддержки IE8, что делает его "не идти" для меня. Несмотря на это, я не собираюсь отбрасывать всю структуру, в частности то, что свободный использовать и свободный чтобы изменить на основе только нескольких вопросов!

черт возьми, в одном проекте я поднял части фундамента и части Bootstrap и добавил свой собственный код-это красота с открытым исходным кодом.

Если вы все еще предпочитаете Bootstrap с поддержкой em и rem, вы можете взглянуть на это -https://github.com/ivayloc/twbs-rem-em нет необходимости делать какие-либо вычисления для преобразования пикселей в rem или em единиц, есть сборка в @mixins для этого - @include rem(property, values) - также запасной вариант для px и для преобразования em вы можете использовать em(value).

в то время как я использую Bootstrap экстенсивно, есть несколько областей, где доступность занимает второстепенное место. Я думаю, что есть неизбежные компромиссы с платформой, которая используется так широко.

Я полностью понимаю, почему они решили сохранить пиксели для размера шрифта. Проблемы наследования с em для шрифтов фреймворка-это полный кошмар.

rems являются альтернативным вариантом, но поддержка браузера по-прежнему проблематична.

вы можете создать свои собственные rems смешайте и замените каждую строку меньше, которая использует базовую переменную размера шрифта.

Это красота bootstrap-и фреймворки, как это-это твердая основа для работы.

Да, я упоминал, что есть элементы для Twitter bootstrap, которые не доступны - один небольшой пример, использование "display: none" вместо использования clip. Я чертовски уверен, что для этого есть веская причина - и опять же, вы можете очень легко изменить это, если хотите.

Bootstrap не безупречно, но тогда, я сомневаюсь, что это когда-либо было предназначено, чтобы быть окончательным ответом на все ваши требования. Это база - "bootstrap" - изучите ее и используйте правильно, добавьте к ней, смешайте все это-по крайней мере, это потрясающая структура для прототипа или для быстрого создания сайта. Идя дальше, есть некоторые действительно прочные основы, которые могут быть применены к любой сайт.

Я думаю, это из-за рабочего стола первого подхода. Twitter Bootstrap-это отзывчивый дружественный, но "изящный" подход.