@mixin fp($property, $min, $max, $start:320, $end:1024, $clip: true, $sourceUnit:vw, $clipAtStart: true, $clipAtEnd: true) { $multiplier: ($max - $min) / ($end - $start) * 100; $adder: ($min * $end - $max * $start) / ($end - $start); $formula: calc(#{$multiplier + $sourceUnit} + #{$adder + 0px}); @if($clip and $clipAtStart){ @media (max-width: #{$start + 0px}) { #{$property}: $min + 0px; } } @if($clip and $clipAtEnd){ @media (min-width: #{$end + 0px}) { #{$property}: $max + 0px; } } #{$property}: $formula; } body { background-color: #fff; padding: 0; margin: 0; font-family:sans-serif; } header{ display: block; background-color: #add; display: table; width: 100%; h1{ margin:0; padding:0; display: table-cell; vertical-align: middle; padding-left: 10px; text-align: center; } } logo{ background-color:lightgreen; @include fp(width,50,80); @include fp(height,50,80); display: table-cell; vertical-align: middle; } size{ display: table-cell; vertical-align: middle; width:50px; } content{ @include fp(padding,20,50); background-color: #eaa; display: block; } content-inner{ display: block; @include fp(max-width,280,800); margin: 0 auto; } h1{ margin:0; padding:0; @include fp(font-size,20,40); } h2{ margin:0 0 0.5em 0; padding:0; @include fp(font-size,15,30); } p{ margin:0 0 1em 0; padding:0; @include fp(font-size,13,16); } h1, h2, p{ position: relative; &:after{ content:" (" attr(size) ")"; display: inline; } }