Bootstrap 4: Как я могу установить $ font-size-base для разных размеров монитора, используя адаптивный размер шрифта? - PullRequest
0 голосов
/ 17 марта 2019

Я использую гем 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.

1 Ответ

0 голосов
/ 17 марта 2019

Все описано в хранилище RFS .

Вы устанавливаете самый большой размер шрифта.Он будет применяться, когда область просмотра больше 1200 пикселей.Когда область просмотра меньше, размер шрифта автоматически изменяется.Итак, если у вас есть следующий код:

element { font-size: 20px; }

Вы должны заменить его на:

element { font-size: font-size(20px); }

Варианты реализации и параметры по умолчанию можно найти в исходном коде RFS в начальной загрузкеgem: ссылка .

Тогда вам не нужно использовать $font-size-base, вместо этого используйте $rfs-base-font-size.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...