Edit in JSFiddle

@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;
}    
  }