$maxWidth: 1280; @mixin adaptive-font($pcSize, $mobSize) { $additionSize: $pcSize - $mobSize; $additionMobSize: $additionSize + $additionSize * 0.7; // for all screen width less than 767px(iPad) @media (max-width: 767px) { font-size: calc(#{$mobSize + px} + #{$additionMobSize} * ((100vw - 350px) / #{$maxWidth})); } // for all screen width more than 767px @media (min-width: 767px) { font-size: calc(#{$mobSize + px} + #{$additionSize} * (100vw / #{$maxWidth})); } }