Skip to content

Instantly share code, notes, and snippets.

@JawsomeJason

JawsomeJason/viewport-fluid.less

Created October 20, 2018 20:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JawsomeJason/1400133dddd18d76fbe86cffc5f27b09 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JawsomeJason/1400133dddd18d76fbe86cffc5f27b09 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JawsomeJason created this gist Oct 20, 2018.
    14 changes: 14 additions & 0 deletions viewport-fluid.less
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    // see https://css-tricks.com/snippets/css/fluid-typography/ for 🤯
    .viewport-fluid(@property, @from, @to, @screen-min: @screen-sm, @screen-max: @screen-lg, @viewport-unit: vw) {
    @{property}: @from;

    @media (min-width: @screen-min) {
    @{property}: calc(
    @from + unit(@to - @from) * ((~"100@{viewport-unit}" - @screen-min) / unit(@screen-max - @screen-min))
    );
    }

    @media (min-width: @screen-max) {
    @{property}: @to;
    }
    }