// Defining values
// Extra small devices (phones, less than 768px)
// No media query since this is the default in Bootstrap
// Small devices (tablets, 768px and up)
$screen-sm-min: 768px;
$screen-xs-max: ($screen-sm-min - 1);
// Medium devices (desktops, 992px and up)
$screen-md-min: 992px;
$screen-sm-max: ($screen-md-min - 1);
// Large devices (large desktops, 1200px and up)
$screen-lg-min: 1200px;
$screen-md-max: ($screen-lg-min - 1);
// Usage
@media (max-width: $screen-xs-max) { ... }
@media (min-width: $screen-sm-min) { ... }
@media (max-width: $screen-sm-max) { ... }
@media (min-width: $screen-md-min) { ... }
@media (max-width: $screen-md-max) { ... }
@media (min-width: $screen-lg-min) { ... }
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) { ... }
/*
Mobile First Method
*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) { … }
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) { … }
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) { … }
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) { … }
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) { … }
/*
Non-Mobile First Method
*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) { … }
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) { … }
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) { … }
/* Extra Small Devices, Phones*/
@media only screen and (max-width : 480px) { … }
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) { … }