Responsive and Media Queries

Responsive and Media Queries work the exact same way as they would in Less. The only differences are:

  • You can nest media queries
  • You can set variables

Nested Media Queries

Here's an example how you can do this:

h2 {
    font-size: 60px;

    @media (max-width: 1199px) { font-size: 50px; }
    @media (max-width: 991px) { font-size: 40px; }
    @media (max-width: 767px) { font-size: 30px; }
    @media (max-width: 480px) { font-size: 20px; }
}

This is really convenient for organizing your CSS into "blocks" or "components". Now you can focus on building a specific element in a self-contained area for all devices.

Table of Contents

    Responsive Variables

    Finally, you can also use variables to define your break-points. This is what frameworks like Bootstrap 3 do.

    The idea is you eventually build your Less to be dynamic where you can set a ton of variables in a single file, say called variables.less. This is way you can configure your framework. For your grid, want 10 or 12 breakpoints? For responsive, where are your breakpoints for desktop or phone begin?

    Here's an example for a non-mobile-first approach:

    /*====================================
    =            BREAK POINTS            =
    ====================================*/
    @wide-screen-down: ~'(max-width: 1199px)';
    @desktop-down: ~'(max-width: 991px)';
    @tablet-down: ~'(max-width: 767px)';
    @phone-down: ~'(max-width: 480px)';
    @small-phone-down: ~'(max-width: 320px)';
    
    h2 {
        font-size: 60px;
    
        @media @wide-screen-down { font-size: 50px; }
        @media @desktop-down{ font-size: 40px; }
        @media @tablet-down { font-size: 20px; }
        @media @phone-down { font-size: 15px; }
    }