CSS: Detect Viewport Change

viewport-change.scss

/*
Based on: http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/
 
 
*/

body {
  @include animation-duration( 0.001s );
  
  @media screen and (min-width: 48em) {    
    @include animation-name( mq-gt-md );
  }

  @media screen and (max-width: 48em ) {    
    @include animation-name( mq-lt-md );
  }
}

@include keyframes( mq-gt-md ) {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); } 
}

@include keyframes( mq-lt-md ) {
  from { clip: rect(1px, auto, auto, auto); }
  to { clip: rect(0px, auto, auto, auto); } 
}