Skip to content

Instantly share code, notes, and snippets.

@Mao8a
Created January 8, 2014 23:13
Show Gist options
  • Save Mao8a/8326496 to your computer and use it in GitHub Desktop.
Save Mao8a/8326496 to your computer and use it in GitHub Desktop.
LESS: MediaQueries based on bootstrap 3
/* media-queries.less */
/*
Deffined on variables.less from bootstrap
Large screen / wide desktop / screen >= 1200px
Medium screen / desktop / 992px >= screen < 1200px
Small screen / tablet / 768px >= screen < 992px
Extra small screen / phone / 480px >= screen < 768px
Very small screen / Outdated phone / screen < 480px
*/
/* Large screen & Biger */
@media (min-width: @screen-lg) {
//@import 'mq-lgnb.less';
}
/* Medium screen & Biger */
@media (min-width: @screen-md) {
//@import 'mq-mdnb.less';
}
/* Small screen & Biger */
@media (min-width: @screen-sm) {
//@import 'mq-smnb.less';
}
/* Extra small screen & Biger */
@media (min-width: @screen-xs) {
//@import 'mq-xsnb.less';
}
/* Medium screen and smaller */
@media (max-width: @screen-md-max) {
//@import 'mq-mdns.less';
}
/* Small screen and smaller */
@media (max-width: @screen-sm-max) {
//@import 'mq-smns.less';
}
/* Extra small screen and smaller */
@media (max-width: @screen-xs-max) {
//@import 'mq-xsns.less';
}
/* smaller than Extra small screen */
@media (max-width: (@screen-xs - 1)) {
//@import 'mq-stxs.less';
}
/* Only Medium screen */
@media (min-width: @screen-md) and (max-width: @screen-md-max) {
//@import 'mq-only-md.less';
}
/* Only Small screen */
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) {
//@import 'mq-only-sm.less';
}
/* Only Extra small screen */
@media (min-width: @screen-xs) and (max-width: @screen-xs-max) {
//@import 'mq-only-xs.less';
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment