Responsive text styles depending on screen size is all the rage these days.
Here’s an example of a sass mixin that lets you define a screen width where a max value should be reached, and the smallest value it is allowed to have. It will interpolate between these values automatically.
/**
* Interpolate a value down to a minimum value from its
* maximum at a defined viewport width
*
* @param {string} $property The css attribute, eg. 'font-size'
* @param {int} $value_min Minimum value in pixels.
* @param {int} $value_max Minimum value in pixels.
* @param {int} $viewport_width_max Viewport width for the max value.
*/
@mixin vw-min-max( $property, $value_min, $value_max, $viewport_width_max ) {
$vw: ( $value_max / $viewport_width_max ) * 100;
$min_width: ( $value_min / $vw ) * 100;
$mq_min: #{$min_width}px;
$mq_max: #{$viewport_width_max}px;
#{$property}: #{$value_min}px;
@media all and (min-width: $mq_min) {
#{$property}: #{$vw}vw;
}
@media all and (min-width: $mq_max) {
#{$property}: #{$value_max}px;
}
}
For example: A header should have a font-size of 80px at 1000px wide, and grow smaller on narrower screens, but not smaller than 20px.
h2 {
@include vw-min-max( 'font-size', 20, 80, 1000 );
}
See it in use on my portfolio site, where it is applied not only to text, but also various divs to create a fluid appearance on window resize.