Media Query Boilerplate

mq-boilerplate.css

/**
 * Target styles based on screen color support
 */

/* Screen is in monochrome */
@media (monochrome) {
}

/* Screen is in color */
@media (color) {
}

/* Screen has at least 256 colors */
@media (min-color-index: 256) {
}


/**
 * Target styles based on device resolution
 * (note: may need vendor prefixes on device-pixel-ratio)
 */

/* 1.25+ dpr */
@media (min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
}

/* 1.3+ dpr */
@media (min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) {
}

/* 1.5+ dpr */
@media (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
}

/* 2.0+ dpr (Retina) */
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
}

/**
 * Target styles based on viewport width
 * (note: all mobile/tablet/desktops with > 2% marketshare as of Aug '13)
 * 
 * device-width:
 *   The width of the device's screen, in device pixels.
 * 
 * width:
 *   The width of the device's screen, in CSS pixels.
 * 
 * Therefore,
 *   To swap layouts, use 'width' / 'max-width' / 'min-width'.
 *   To swap from mouse to touch gestures or otherwise specifically serve
 *     styles to mobile devices and not small desktop browsers,
 *     use 'device-width' / 'device-max-width' / 'device-min-width'.
 */

@media (min-width: 320px) {
}

@media (min-width: 480px) {
}

@media (min-width: 533px) {
}

@media (min-width: 540px) {
}

@media (min-width: 600px) {
}

@media (min-width: 640px) {
}

@media (min-width: 720px) {
}

@media (min-width: 768px) {
}

@media (min-width: 800px) {
}

@media (min-width: 1024px) {
}

@media (min-width: 1080px) {
}

@media (min-width: 1200px) {
}

@media (min-width: 1280px) {
}

@media (min-width: 1366px) {
}

@media (min-width: 1440px) {
}

/**
 * Target styles based on device orientation
 * (note: works reliably only in iOS,
 *  js solution needed for Android/Windows Phone,
 *  see http://davidwalsh.name/orientation-change)
 */

/* Portrait */
@media screen and (orientation:portrait) {
}

/* Landscape */
@media screen and (orientation:landscape) {
}