Adaptive font size Less mixin & px fallback

font-size.less

.font-size(@font-size: 16, @mobile-ratio: 66) {
    @rem: (@font-size / 10);
    @percent: (@mobile-ratio / 100);
 
    font-size: (@font-size * 1px);
    font-size: ~"@{rem}rem";
 
    @media @mobile {
      @rem: ((@font-size / 10) * @percent);
 
      font-size: (@font-size * 1px);
      font-size: ~"@{rem}rem";
    }
}

style.css

// Generated CSS

html {
  font-size: .625em;
}
body {
  font-size: 18px;
  font-size: 1.8rem;
}
@media screen only (max-width: 600px) {
  body {
    font-size: 18px;
    font-size: 1.1880000000000002rem;
  }
}

style.less

@import 'font-size';

@mobile: ~"screen only (max-width: 600px)";

html {
  font-size: .625em;
}

body {
  .font-size(18);
}