PostCSS Responsive Font

Test #3!

Set responsive min/max font-sizes within viewport ranges...

Adds a new declaration that requires 4 values.

font-size-responsive: min-font-size max-font-size min-viewport-width max-viewport-width

Input:

.foo {
    font-size-responsive:12px 32px 480px 1280px;
}

Output:

.foo {
    font-size:12px;
}
@media (min-width:480px) {
    .foo {
        font-size: 32px
    }
}
@media (min-width:480px) and (max-width:1280px) {
    .foo {
        font-size: calc(12px + (32 - 12) * ((100vw - 480px) / (1280 - 480)))
    }
}

Demo :

Usage

postcss([ require('postcss-responsive-font') ])

See PostCSS docs for examples for your environment.