Fancy Media Queries with some LESS Magic

Question

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I\'d like to do something like:

footer {
  width: 1         


        

Answer 1

And this is what I have used for my project:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }