Use this mixin to set a proportional, continuous sizing between some given breakpoints. It usually takes $property: font-size, but can be used with any css property that acepts calc().

To make it work, set points (viewport width and desired font-size) on a $map variable, pass it to the mixin and it will generate media queries and calc() values that will enable a fluid sizing of the given property, as opposed to @media query “jumps”.

For example: $map: (576px: 22px, 768px: 24px, 992px: 34px) will be read as:

at viewport width = 576px, start at 22px; then move up to 24px on 768px and then to a maximum of 34px on 992px)

This also means that below 576s px we will have a fixed 22px value and above 992px we will see a 34px fixed maximum value (think of it as a kind of max-height property).

Resize this codepen to see it live (open it on a new tab to see it clearly).

Parameters

• $property - A valid css property that can take calc() as value.
• $map - A map containing the fluid breakpoints in the form of viewport-width: property-value

Example

h1.poly-fluid-sizing {
    // Let's put some crazy values to see a clear progression...!
    // Start at 6px @ 400w, 
    // quick increase to 30px @ 700w
    // then reeeeally slow up to 35px @ 1100px 
    // and then a great jump to 80px @ 1200px
    $map: (400px: 6px, 700px: 30px, 1100px: 35px, 1200px: 60px);
    @include poly-fluid-sizing('font-size', $map);

    // Unitless or em relative line-heights will really help you here...
    line-height:1em;
}

<h1 class="poly-fluid-sizing">
  I grow and shrink with the viewport
</h1>

I grow and shrink with the viewport

Reference

Fluid Responsive Typography With CSS Poly Fluid Sizing