<h1>Responsive Text Mixin</h1>
<div class="texter">Alright, this next test may involve trace amounts of time travel. So, word of advice: If you meet yourself on the testing track, don't make eye contact. Lab boys tell me that'll wipe out time. Entirely. Forward and backward! So do both of yourselves a favor and just let that handsome devil go about his business.</cav9><br><br> <b>-Cave Johnson</b></div>
body{ font-family: sans-serif;background: linear-gradient(to top, #1E113A, purple); background-repeat: no-repeat; height: 100vh; color: #fff; padding: 2em; overflow-y: hidden; text-shadow: 0 1px 1px #000;}
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
// Responsive text mixin
@mixin responsiveText ($minSize: $font-size, $maxSize: 28px, $minWidth: 420px, $maxWidth: 980px) {
$mxS: strip-unit($maxSize);
$mnS: strip-unit($minSize);
$mxW: strip-unit($maxWidth);
$mnW: strip-unit($minWidth);
font-size: calc( #{$minSize} + (#{$mxS} - #{$mnS}) * (100vw - #{$minWidth}) / (#{$mxW} - #{$mnW}));
@media screen and (max-width: $minWidth ){
font-size: $minSize;
}
@media screen and (min-width: $maxWidth ){
font-size: $maxSize;
}
}
h1 {
@include responsiveText(24px, 72px);
}
.texter {
@include responsiveText(12px, 50px);
max-width: 980px;
margin:auto;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.