Aqui está um media queries Sass mixin que eu costumo usar no projeto.
Consultas de mídia responsivas
$phone : '(max-width: 480px)';
$tablet-portrait: '(max-width: 767px)';
$tablet-landscape: '(min-width: 768px) and (max-width: 979px)';
$large-desktop: '(min-width: 1200px)';
$non-retina: 'screen and (-webkit-max-device-pixel-ratio: 1)';
$retina: '(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx)';
@mixin respond-to($media) {
@media only screen and #{$media} {
@content;
}
}
Como usar
body {
background-color: rgba(#1abc9c, .5);
@include respond-to($phone) {
background-color: rgba(#2ecc71, .5);
}
@include respond-to($tablet-portrait) {
background-color: rgba(#3498db, .5);
}
@include respond-to($tablet-landscape) {
background-color: rgba(#9b59b6, .5);
}
}
Compilar o código
body {
background-color: rgba(26, 188, 156, 0.5);
}
@media only screen and (max-width: 480px) {
body {
background-color: rgba(46, 204, 113, 0.5);
}
}
@media only screen and (max-width: 767px) {
body {
background-color: rgba(52, 152, 219, 0.5);
}
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
body {
background-color: rgba(155, 89, 182, 0.5);
}
}
Código de demonstração: http://codepen.io/dangvanthanh/pen/JHpEB
Também agradeço a Thomas Fuchs sobre consultas de mídia para retina: http://mir.aculo.us/2012/11/28/the-ultimate-target-retina-screens-media-query/