A starting point for responsive design and retina graphics. Best used in conjunction with Twitter Bootstrap.

queries.less

/* !START Responsive Queries*/
// -----------------------------------------------------------------------------------------------------
/* !Mobile Default - Landscape phone to portrait tablet */
// ------------------------------------------------------
@media (max-width: 767px) {
/* Styles */

}// Close Query

/* !Mobile - Landscape Specific */
// ------------------------------------------------------
@media (min-width: 480px) and (max-width: 767px) {
/* Styles */

}// Close Query

/* !Mobile */
// ------------------------------------------------------
@media (max-width: 480px) {
/* Styles */

}// Close Query

/* !Tablet - portrait to landscape and desktop */
// ------------------------------------------------------
@media (min-width: 768px) and (max-width: 979px) {
/* Styles */

}// Close Query


/* !iPads - portrait and landscape */
// ------------------------------------------------------
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */

}// Close Query

/* !iPads - landscape */
// ------------------------
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

}// Close Query

/* !iPads - portrait */
// -----------------------
@media only screen 
and (min-device-width : 768px)
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

}// Close Query

/* !Desktop - 980 */
// ------------------------------------
@media (min-width: 980px) {
/* Styles */

}// Close Query

/* !Large Desktop - 1200+ */
// ----------------------------------------
@media (min-width: 1200px) {
/* Styles */

}// Close Query


// This is a special 
/* !XLarge Desktop - (non-standard query) */
// ----------------------------------------
@media (min-width: 1441px) and (max-width: 1919px) {
/* Styles */

}// Close Query

// This is a special 
/* !XXLarge Desktop - (non-standard query) */
// ----------------------------------------
@media (min-width: 1920px) and (max-width: 2560px) {
/* Styles */

}// Close Query

/* !START Retina Queries */
// (Tip: Best used only for image replacement)
// -----------------------------------------------------------------------------------------------------

/* !Retina - non specific width */
// ------------------------------------------------------------------
@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (   -min-moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
/* Styles */
  
}// Close Query

/* !Retina - Desktop 980 */
// ------------------------------------------------------------------
@media 
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 980px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 980px),
only screen and (   -min-moz-device-pixel-ratio: 2)      and (min-width: 980px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 980px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 980px),
only screen and (                min-resolution: 192dpi) and (min-width: 980px),
only screen and (                min-resolution: 2dppx)  and (min-width: 980px) {
/* Styles */
  
}// Close Query

/* !Retina - Tablet */
// -----------------------------------------------------------------------
@media 
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 979px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 979px),
only screen and (   -min-moz-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 979px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 768px) and (max-width: 979px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 768px) and (max-width: 979px),
only screen and (                min-resolution: 192dpi) and (min-width: 768px) and (max-width: 979px),
only screen and (                min-resolution: 2dppx)  and (min-width: 768px) and (max-width: 979px) {
/* Styles */

}// Close Query

/* !Retina - Mobile (Defult) */
// ------------------------------------------------------------------
@media 
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (   -min-moz-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 767px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 767px),
only screen and (                min-resolution: 192dpi) and (max-width: 767px),
only screen and (                min-resolution: 2dppx)  and (max-width: 767px) {
/* Styles */

}// Close Query

/* !Retina - Mobile */
// ------------------------------------------------------------------
@media 
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (   -min-moz-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 480px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 480px),
only screen and (                min-resolution: 192dpi) and (max-width: 480px),
only screen and (                min-resolution: 2dppx)  and (max-width: 480px) {
/* Styles */

}// Close Query