joshuapekera
10/30/2012 - 5:21 AM
A starting point for responsive design and retina graphics. Best used in conjunction with Twitter Bootstrap.
A starting point for responsive design and retina graphics. Best used in conjunction with Twitter Bootstrap.
/* !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