// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Responsive
// Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of .media-width()
mixin defined anywhere in project but invoked in one place in lib/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.
// ```
//
@extremum: max|min
- sets whether to use **min-width** or **max-width** in media query condition@break: value
- sets the value of breakpoint to compare with in media query condition.@media-common: true|false
- sets whether to output common styles.
// For common styles every time you want to add some styles you should use
// ```css
// & when (@media-common = true) {
// your styles
// }
// ```
//
// @media-target: all|desktop|mobile
- Sets target device for styles output
// ```css
// & when (@media-target = 'mobile'),
// (@media-target = 'all') {
// @media only screen and (max-width: (@screen__xs - 1)) {
// .media-width('max', @screen__xs);
// }
// }
// ```
//
// ## Gathering
//
// Everything that you include in collector mixins above will go in place where they declared.
// As example all
// ```css
// .media-width(@extremum, @break) {
// your code
// }
// ```
// Will go to
// ```css
// .media-width(@extremum, @break));
// ```
// By default you can find it _responsive.less
file in li
//
//
// # Responsive breakpoints
// In Magento UI library there are predefined variables for breakpoints.
// ```css
// @screen__xxs: 320px;
// @screen__xs: 480px;
// @screen__s: 640px;
// @screen__m: 768px;
// @screen__l: 1024px;
// @screen__xl: 1440px;
// ```
//