LESS CSS media queries per device type

LESS CSS

// CSS

What it does

Create a variable (technically a constant) for each device type, based on device screen width. You can then use these easily within your LESS CSS stylesheet as shown below.

The Code

// Declare your constants for each device
@desktop:  		 	~"only screen and (min-width: 1601px)";
@laptop:   			~"only screen and (min-width: 901px) and (max-width: 1600px)";
@tablet:   			~"only screen and (min-width: 769px) and (max-width: 900px)";
@mobile:   			~"only screen and (max-width: 768px)";
@mobileSmall:  			~"only screen and (max-width: 499px)";

// How to use these in your LESS stylesheet
.parentElement {
	.childElement {
	  width: 25%;
	  @media @laptop {
		  width: 33%;
	  }
	  @media @tablet {
		  width: 50%;
	  }
	  @media @mobile {
	  	width: 100%;
	  }
	}
}

Copy Snippet

How To Use It

Paste this snippet into your LESS CSS stylesheet.