Я использую гем Bootstrap в своем приложении Ruby on Rails (версия 4.3.1). Недавно я узнал о функциональности адаптивного размера шрифта (rfs). Он был только что доступен в версии 4.3 в соответствии с документацией Bootstrap.
Документация по начальной загрузке RFS
Документация RFS от GitHub
Я не смог найти никакой документации о том, как реализовать это с помощью гема. Вот что я сделал до сих пор.
Приложение / активы / JavaScripts / application.js
//= require bootstrap
Я включил RFS следующим образом.
$enable-responsive-font-sizes: true;
Размер шрифта по умолчанию в $font-size-base
установлен в 1rem (16 пикселей, вроде).
Я обычно устанавливаю размер шрифта по умолчанию для разных мониторов в моей таблице стилей следующим образом.
body, html { font-size: 14px; font-family: Arial; }
@media screen and (min-width: 769px) and (max-width: 1239px) { body, html { font-size: 16px; } }
@media screen and (min-width: 1240px) and (max-width: 1999px) { body, html { font-size: 18px; } }
@media screen and (min-width: 2000px) { body, html { font-size: 20px; } }
Из того, что я читаю, мне больше не нужно было этого делать. С этим новым функционалом, как работает настройка $font-size-base
? Должно ли значение быть установлено на наибольший желаемый размер шрифта (в моем примере 20 пикселей) или наименьшее? Я спрашиваю, потому что Bootstrap стал мобильным первым в версии 3. Все остальные значения по умолчанию, которые я считаю, должны работать для моих сайтов.
Переменные самоцвета Bootstrap
Поскольку это новый функционал, я не нашел никакой информации от тех, кто это реализовал. Это выглядит как замечательное дополнение к Bootstrap. Я могу удалить большую часть кода CSS из моей таблицы стилей, как только пойму, как $font-size-base
работает с rfs.