Skip to content

Instantly share code, notes, and snippets.

@arthuralvim
Last active August 29, 2015 14:03
Show Gist options
  • Save arthuralvim/925c2e69132810eb55c4 to your computer and use it in GitHub Desktop.
Save arthuralvim/925c2e69132810eb55c4 to your computer and use it in GitHub Desktop.
Bootstrap 3 Media Queries for Breakpoints.
// Custom Iphone screen (MIN)
@screen-iphone-min: 320px !default;
// Extra small screen / phone (MIN)
@screen-xs-min: 480px !default;
// Small screen / tablet (MIN)
@screen-sm-min: 768px !default;
// Medium screen / desktop (MIN)
@screen-md-min: 992px !default;
// Large screen / wide desktop (MIN)
@screen-lg-min: 1200px !default;
// Extra small screen / phone (MAX)
@screen-xs-max: (@screen-sm-min - 1) !default;
// Small screen / tablet (MAX)
@screen-sm-max: (@screen-md-min - 1) !default;
// Medium screen / desktop (MAX)
@screen-md-max: (@screen-lg-min - 1) !default;
@media (max-width: @screen-xs-max) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
/* Another Organization */
/* Mobile First Method */
/* Custom, iPhone Retina */
@media only screen and (min-width: @screen-iphone-min) { ... }
/* Extra Small Devices, Phones */
@media only screen and (min-width: @screen-xs-min) { ... }
/* Small Devices, Tablets */
@media only screen and (min-width : @screen-sm-min) { ... }
/* Medium Devices, Desktops */
@media only screen and (min-width : @screen-md-min) { ... }
/* Large Devices, Wide Screens */
@media only screen and (min-width : @screen-lg-min) { ... }
/* Non-Mobile First Method */
/* Large Devices, Wide Screens */
@media only screen and (max-width : @screen-lg-min) { ... }
/* Medium Devices, Desktops */
@media only screen and (max-width : @screen-md-min) { ... }
/* Small Devices, Tablets */
@media only screen and (max-width : @screen-sm-min) { ... }
/* Extra Small Devices, Phones */
@media only screen and (max-width : @screen-xs-min) { ... }
/* Custom, iPhone Retina */
@media only screen and (max-width : @screen-iphone-min) { ... }
// Custom Iphone screen (MIN)
$screen-iphone-min: 320px !default;
// Extra small screen / phone (MIN)
$screen-xs-min: 480px !default;
// Small screen / tablet (MIN)
$screen-sm-min: 768px !default;
// Medium screen / desktop (MIN)
$screen-md-min: 992px !default;
// Large screen / wide desktop (MIN)
$screen-lg-min: 1200px !default;
// Extra small screen / phone (MAX)
$screen-xs-max: ($screen-sm-min - 1) !default;
// Small screen / tablet (MAX)
$screen-sm-max: ($screen-md-min - 1) !default;
// Medium screen / desktop (MAX)
$screen-md-max: ($screen-lg-min - 1) !default;
@media (max-width: $screen-xs-max) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) { ... }
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: $screen-md-min) { ... }
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: $screen-lg-min) { ... }
/* Another Organization */
/* Mobile First Method */
/* Custom, iPhone Retina */
@media only screen and (min-width: $screen-iphone-min) { ... }
/* Extra Small Devices, Phones */
@media only screen and (min-width: $screen-xs-min) { ... }
/* Small Devices, Tablets */
@media only screen and (min-width : $screen-sm-min) { ... }
/* Medium Devices, Desktops */
@media only screen and (min-width : $screen-md-min) { ... }
/* Large Devices, Wide Screens */
@media only screen and (min-width : $screen-lg-min) { ... }
/* Non-Mobile First Method */
/* Large Devices, Wide Screens */
@media only screen and (max-width : $screen-lg-min) { ... }
/* Medium Devices, Desktops */
@media only screen and (max-width : $screen-md-min) { ... }
/* Small Devices, Tablets */
@media only screen and (max-width : $screen-sm-min) { ... }
/* Extra Small Devices, Phones */
@media only screen and (max-width : $screen-xs-min) { ... }
/* Custom, iPhone Retina */
@media only screen and (max-width : $screen-iphone-min) { ... }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment