Mao8a
1/8/2014 - 11:13 PM

LESS: MediaQueries based on bootstrap 3

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