LESS: MediaQueries based on bootstrap 3

media-queries-based-on-bootstrap.less

// Media queries breakpoints
// --------------------------------------------------

// Extra small screen / phone
$screen-xs:                  480px !default;
$screen-phone:               $screen-xs !default;

// Small screen / tablet
$screen-sm:                  768px !default;
$screen-tablet:              $screen-sm !default;

// Medium screen / desktop
$screen-md:                  992px !default;
$screen-desktop:             $screen-md !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;
$screen-lg-desktop:          $screen-lg !default;

// So media queries don't overlap when required, provide a maximum
$screen-xs-max:              ($screen-sm - 1) !default;
$screen-sm-max:              ($screen-md - 1) !default;
$screen-md-max:              ($screen-lg - 1) !default;

/* 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';
}