Question

Can someone please explain to me how this responsive approach works? This was done using the LESS framework. How is the author achieving the desired device specific behavior?

.responsive (@scale: 1) {

/*Responsive code goes here for example*/
.logo {
        padding: 44px * @scale 0 33px * @scale;

        img {
            width: 580px * @scale;
            height: 90px * @scale;
        }
    }
}

.responsive;

@media screen and (min-width: 480px) and (max-width: 639px) {
    .responsive(0.75);
}

@media screen and (min-width: 320px) and (max-width: 479px) {
    .responsive(0.5);
}

@media screen and (max-width: 319px) {
    .responsive(0.25);
}

Answer 1

A quick lesson on the LESS framework first. It’s basically a preprocessor of CSS that uses coding concepts to make CSS much more easy and readable to write.

The Less stylesheet translates to CSS as follows:

.logo {
  padding: 44px 0 33px;
}
.logo img {
  width: 580px;
  height: 90px;
}
@media screen and (min-width: 480px) and (max-width: 639px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 33px 0 24.75px;
  }
  .logo img {
    width: 435px;
    height: 67.5px;
  }
}
@media screen and (min-width: 320px) and (max-width: 479px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 22px 0 16.5px;
  }
  .logo img {
    width: 290px;
    height: 45px;
  }
}
@media screen and (max-width: 319px) {
  /*Responsive code goes here for example*/
  .logo {
    padding: 11px 0 8.25px;
  }
  .logo img {
    width: 145px;
    height: 22.5px;
  }
}

As you can see, there is a lot of repetition in the CSS and it is not very readable (not to speak of how much work it would be to change the aspect ratio of the logo image).

At the top of the Less code, you see this:

.responsive (@scale: 1) {

    /*Responsive code goes here for example*/
    .logo {
        padding: 44px * @scale 0 33px * @scale;
        img {
            width: 580px * @scale;
            height: 90px * @scale;
        }
    }
}

The above code is referred to as a “parametric mixin”, think of these as classes in object oriented languages. You can pass in variables, set variables and rules in these “mixins”. In this case, @scale is the parameter and a default value of 1 is passed in. You pretty much set rules inside the mixins, except one cool thing you can do with LESS is declare “nested” rules (which is what you see with the img selector inside the .logo selector. This is essentially the same as .logo img{/*rules*/} – which is what the resulting CSS would have. Refer to this site for a complete document on LESS: http://lesscss.org/

Now the media query aspect of it. As you can see, .responsive mixin is declared first – so think of this ruleset as the “default” viewport rules.

The first media query @media screen and (min-width: 480px) and (max-width: 639px) states that for ALL viewports that have a browser width more than 480px and less than 639px, apply whatever rules specified – in this case .responsive(0.75); (so rescaling dimensions in the mixin with 0.75 as the parameter). Therefore, when this argument is met, the cascading aspect of CSS will override the default rules set out beforehand with the rules inside the media query.

The same concept would apply for the other media queries. Just think of min-width and max-width as breakpoint setters. Wherever you see a min-width defined, the rules will be applied for all viewports that are larger than or at least that defined breakpoint. Likewise, for max-width rules are applied for all viewports that are less than the specified breakpoint. And you can combine both min-width and max-width in a media query to obtain a range of viewports to apply rules to.

For more information I suggest looking at this article http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

It’s got an excellent explanation of responsive design, and how media query comes into play and designing a responsive webpage.