SCSS: Media queries mixin
=respond-to($device)
@if $device == handheld
@media only screen and (min-width : 320px)
@content
@if $device == tablet
@media only screen and (min-width : 600px)
@content
@if $device == tablet-landscape
@media only screen and (min-width : 600px) and (orientation : landscape)
@content
@if $device == tablet-portrait
@media only screen and (min-width : 600px) and (orientation : portrait)
@content
@if $device == tablet-large
@media only screen and (min-width : 768px)
@content
@if $device == desktop
@media only screen and (min-width : 1024px)
@content
@if $device == desktop-large
@media only screen and (min-width : 1824px)
@content
@if $device == retina-display
@media only screen and (-webkit-min-device-pixel-ratio: 2)
@content
/* Implementation
h2
color: #523611
font-weight: bold
margin-bottom: 1.0em
+respond-to(handheld)
font-size: 1.0em
text-align: center
+respond-to(tablet)
font-size: 1.2em
text-align: left
+respond-to(desktop)
font-size: 1.5em
http://blog.littlelines.com/post/30586881387/littlelines-responds
*/