PostCSS Responsive Font 
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)))
}
}Using Multiple Declarations
To use multiple declarations, simply place multiple font-size-responsive declarations in normal cascading order within .foo.
It may be obvious to some, but you do NOT want to use font-size-responsive within a media query. font-size-responsive creates its own media query values based on a user's input so it would not make sense to nest media queries inside of media queries!
Don't forget--using multiple declarations is just like cascading normal CSS-- make sure they are in the appropriate order for the appropriate effect.
To clarify, let's look at a proper example's Input and Output:
Input:
.foo {
font-size-responsive: 30px 60px 980px 1280px;
font-size-responsive: 15px 45px 767px 980px;
font-size-responsive: 12px 20px 480px 600px
}Output:
.foo {
font-size: 30px;
font-size: 15px;
font-size: 12px
}
@media (min-width: 480px) {
.foo {
font-size: 20px
}
}
@media (min-width: 480px) and (max-width: 600px) {
.foo {
font-size: calc(12px + (20 - 12) * ((100vw - 480px) / (600 - 480)))
}
}
@media (min-width: 767px) {
.foo {
font-size: 45px
}
}
@media (min-width: 767px) and (max-width: 980px) {
.foo {
font-size: calc(15px + (45 - 15) * ((100vw - 767px) / (980 - 767)))
}
}
@media (min-width: 980px) {
.foo {
font-size: 60px
}
}
@media (min-width: 980px) and (max-width: 1280px) {
.foo {
font-size: calc(30px + (60 - 30) * ((100vw - 980px) / (1280 - 980)))
}
}Not properly cascading your styles will cause bugs! but you knew that already :)
Demo :
Usage
postcss([ require('postcss-responsive-font') ])See PostCSS docs for examples for your environment.