Responsive sizing

responsive-size.less

//
//  Responsive Size
//  ---------------------------------------------
//  Responsive size mixin, dynamic sizes based on viewport size, implemented with calc()

//  Optional fallback implemented for some unsupported browsers, average of small/large
//  http://caniuse.com/#search=viewport

//  Usage:
//
//  h1 {
//    .responsive-size(25px, 40px);
//    font-size: @size-fallback;
//    font-size: @size;
//  }

//  The result is that the font-size is 25px on 320vmin, and 40px on 1440vmin
//  Everything in between in dynamically calculated: ex. 768vmin = ~31x, 1024vmin = ~34px

.responsive-size(@small, @large, @unit: vmin, @small-vmin: 320, @large-vmin: 1440, @fallback-vmin: 768) {
  @growth: unit((@large - @small) / (@large-vmin - @small-vmin));
  @base: round(@small - (@growth * @small-vmin), 1);
  @vsize: round((@growth * 100), 2);

  @size-fallback: round((@small + @large) / 2);
  @size: calc(~"@{base} + @{vsize}@{unit}");
}