Responsive

Magento UI library provides a strong approach for working with media queries. Its based on recursive call of .media-width()mixin defined anywhere in project but invoked in one place inlib/web/css/source/lib/_responsive.less. That's why in the resulting styles.css` we have every media query only once with all the rules there, not a multiple calls for the same query.

To see the media queries work resize window to understand which breakpoint is applied.

<div class="example-responsive-block"> are applied. </div>

.example-responsive-block {
    padding: 10px;
}

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ffc;
    }
    .example-responsive-block:before {
        content: 'Mobile styles ';
        font-weight: bold;
    }
}

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .example-responsive-block {
        background: #ccf;
    }
    .example-responsive-block:before {
        content: 'Desktop styles ';
        font-weight: bold;
    }
}