Bootstrap 4 c адаптивным размерам шрифта (RFS)

25 декабря 2019 года #bootstrap#RFS

Bootstrap v4.3 представил Responsive Font Sizes (RFS), которые вы можете включить в компиляторе SCSS. Если вы компилируете CSS для своего проекта, я настоятельно рекомендую включить его.

Если вы загружаете Bootstrap из CDN или по каким-то причинам не можете сами скомпилировать SCSS — воспользоваться этими правилами RFS не получится. Есть быстрое решение — крошечный набор правил CSS с соответствующими скомпилированными изменениями.

@media (max-width: 1200px) {
    legend {
        font-size: calc(1.275rem + 0.3vw);
    }
    h1, .h1 {

        font-size: calc(1.375rem + 1.5vw);
    }
    h2, .h2 {

        font-size: calc(1.325rem + 0.9vw);
    }
    h3, .h3 {
        font-size: calc(1.3rem + 0.6vw);
    }
    h4, .h4 {
        font-size: calc(1.275rem + 0.3vw);
    }
    .display-1 {
        font-size: calc(1.725rem + 5.7vw);
    }
    .display-2 {
        font-size: calc(1.675rem + 5.1vw);
    }
    .display-3 {
        font-size: calc(1.575rem + 3.9vw);
    }
    .display-4 {
        font-size: calc(1.475rem + 2.7vw);
    }
    .close {
        font-size: calc(1.275rem + 0.3vw);
    }
}

@media (max-width: 413px) {
    .display-1 {
        font-size: calc(1.225rem + 5.7vw);
    }
}

Вы можете скопировать указанный выше CSS в CSS вашего сайта (после загрузки Bootstrap CSS).