<div class='device'>LESS Media Query - resize the browser window - device detected: </div>
<div class='spot-basic'>hello world</div>
<div class='spot-advanced'>how are you?</div>
@import "lesshat";

@extra-small: ~" (min-width: 480px)";
@small: ~" (min-width: 768px)";
@medium: ~" (min-width: 992px)";
@large: ~" (min-width: 1200px)";

div{
  padding: 1em;
}

.device {
	&::after {
		content: 'extra-extra-small';

		@media @extra-small { content: 'extra-small'; }

		@media @small {	content: 'small'; }

		@media @medium { content: 'medium';	}

		@media @large { content: 'large'; }
	}
}

.spot-basic {
	background-color: #bada55;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  
	@media @extra-small {
		font-size: 120%;
	}

	@media @medium {
		font-size: 200%;
	}
}

.spot-advanced {
	background-color: tomato;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  
	@media @extra-small {
		font-weight: 300;
		text-transform: capitalize;		
	}

	@media @medium {
		font-size: 200%;
		text-transform: uppercase;
    transform: rotate(3deg);
    opacity: 0.8;
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.