Skip to content

Instantly share code, notes, and snippets.

@Realetive
Last active August 29, 2015 14:17
Show Gist options
  • Save Realetive/19b54eb6c599c3756268 to your computer and use it in GitHub Desktop.
Save Realetive/19b54eb6c599c3756268 to your computer and use it in GitHub Desktop.
Twitter Bootstrap media queries cheatsheet
/* Only extra small devices (phones, until 767px) */
@media (max-width: @screen-xs-max) {
/* … */
}
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
/* … */
}
/* Only small devices (tablets, between 768px and 991px) */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
/* … */
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
/* … */
}
/* Only medium devices (desktops, between 992px and 1199px) */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
/* … */
}
/* Only large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
/* … */
}
/* Only extra small devices (phones, until 767px) */
@media (max-width: $screen-xs-max) {
/* … */
}
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) {
/* … */
}
/* Only small devices (tablets, between 768px and 991px) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
/* … */
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) {
/* … */
}
/* Only medium devices (desktops, between 992px and 1199px) */
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
/* … */
}
/* Only large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) {
/* … */
}
// Media Queries - Retina display
$at2x: "(-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx)"; // All retina devices
$at2x-tablet: "(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px),(min-resolution: 2dppx) and (min-device-width: 768px)"; // Larger than iPad display
$at2x-pc: "(-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),(min-resolution: 2dppx) and (min-device-width: 1025px)"; // Larger than PC display (1025px)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment