Software Programming

Kunuk Nykjaer

Working with Less and Media Queries

with one comment


If you want responsive design and work with LESS you could do this. Setup your break points.

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


 

Then when you want to apply responsive design for a component you structure the media queries like this.

.spot-basic {
	font-size: 120%; /* extra extra small is default */

	@media @extra-small {
		font-size: 130%;
	}

	@media @small {
		font-size: 140%;
	}

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

	@media @large {
		font-size: 160%;
	}
}


 

Here is a demo. Edit on Codepen, resize the browser horizontally and see how the content changes.


 

Reference reading:

  • https://www.vodori.com/blog/use-less-media-query-variables-responsive-design/
  • http://codepen.io/ericrasch/full/HzoEx/
  • Advertisements

Written by kunuk Nykjaer

February 11, 2015 at 2:01 pm

Posted in Css

Tagged with

One Response

Subscribe to comments with RSS.

  1. […] design and use Sass you could do this. Setup your break points (this post is similar to my Less post, but with Sass this […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: