Bootstrap RFS

Механизм изменения размера Bootstrap адаптивно масштабирует общие свойства CSS, чтобы лучше использовать доступное пространство между окнами просмотра и устройствами.

Что такое RFS?

Дополнительный проект Bootstrap RFS - это механизм изменения размера модулей, который изначально был разработан для изменения размеров шрифтов (отсюда и его сокращение от Responsive Font Sizes). В настоящее время RFS способен перемасштабирование большинство свойств CSS с единичными значениями , как margin, padding, border-radius или даже box-shadow.

Механизм автоматически вычисляет соответствующие значения на основе размеров области просмотра браузера. Он будет скомпилирован в calc() функции с сочетанием rem единиц и единиц просмотра, чтобы обеспечить гибкое масштабирование.

Использование RFS

Примеси включены в Bootstrap и доступны после того, как вы включите Bootstrap scss. При необходимости RFS можно установить отдельно .

Использование миксинов

rfs() mixin имеет Shorthands для font-size, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, и padding-left. См. пример ниже для исходного кода Sass и скомпилированного CSS.

.title { 
  @include font-size(4rem);
}

.title { 
  font-size: calc(1.525rem + 3.3vw);
}

@media (max-width: 1200px) { 
  .title { 
    font-size: 4rem;
  }
}

Любое другое свойство можно передать rfs() миксину следующим образом:

.selector { 
  @include rfs(4rem, border-radius);
}

!important также можно просто добавить к любому значению, которое вы хотите:

.selector { 
  @include padding(2.5rem !important);
}

Использование функций

Если вы не хотите использовать include, есть еще две функции:

rfs-value() преобразует значение в rem значение, если px значение передано, в других случаях возвращает тот же результат.
rfs-fluid-value() возвращает гибкую версию значения, если свойство требует изменения масштаба.

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

.selector { 
  @include media-breakpoint-down(lg) { 
    padding: rfs-fluid-value(2rem);
    font-size: rfs-fluid-value(1.125rem);
  }
}

@media (max-width: 991.98px) { 
  .selector { 
    padding: calc(1.325rem + 0.9vw);
    font-size: 1.125rem; /* 1.125rem is small enough, so RFS won't rescale this */
  }
}

Расширенная документация

RFS - это отдельный проект в рамках организации Bootstrap. Подробнее о RFS и его конфигурации можно найти в его репозитории GitHub.

На этой странице