Skip to content

Instantly share code, notes, and snippets.

@unruthless
Last active July 5, 2016 10:11
Show Gist options
  • Save unruthless/6254217 to your computer and use it in GitHub Desktop.
Save unruthless/6254217 to your computer and use it in GitHub Desktop.
Media Query Boilerplate
/**
* 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) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment