Created
September 12, 2014 14:19
-
-
Save jasdeepkhalsa/7c4b72628d18744c851d to your computer and use it in GitHub Desktop.
Bootstrap 3 - CSS Media Queries and with their LESS equivalents
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Extra small devices (phones, less than 768px) */ | |
/* No media query since this is the default in Bootstrap */ | |
/* Small devices (tablets, 768px and up) */ | |
/* Less: @media (min-width: @screen-sm-min) { ... } */ | |
@media (min-width: 768px) { } | |
/* Medium devices (desktops, 992px and up) */ | |
/* Less: @media (min-width: @screen-md-min) { ... } */ | |
@media (min-width: 992px) { } | |
/* Large devices (large desktops, 1200px and up) */ | |
/* Less: @media (min-width: @screen-lg-min) { ... } */ | |
@media (min-width: 1200px) { } | |
/* We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices. */ | |
@media (max-width: 767px) { } /* Less: @media (max-width: @screen-xs-max) { ... } */ | |
@media (min-width: 768px) and (max-width: 991px) { } /* Less: @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } */ | |
@media (min-width: 992px) and (max-width: 1199px) { } /* Less: @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } */ | |
@media (min-width: 1200px) { } /* @media (min-width: @screen-lg-min) { ... } */ | |
/* Here are a few additional media queries found in Bootstrap's code */ | |
@media (max-width: 480px) and (orientation: landscape) { } | |
@media screen and (max-width: 767px) { } | |
@media screen and (min-width: 768px) { } | |
@media print { } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment