/*
* Out-of-the-box MEDIAQUERIES
* https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html
* Responsive mixins usage documentation: lib/web/css/docs/source/_responsive.less
*/
// # Consider out-of-the-box Magento 2 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;
//
// Common (styles-m.css)
// _____________________________________________
& when (@media-common = true) {
// your code
}
//
// Mobile (styles-m.css)
// _____________________________________________
// From 0px to 640px
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
// your code
}
// From 0px to 768px
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
// your code
}
//
// Mobile + Tablet
// _____________________________________________
// From 0px to 1439px
& when (@media-target = 'mobile'), (@media-target = 'all') {
@media only screen and (max-width: calc(@screen__xl ~"- 1px")) {
// your code
}
}
//
// Tablet + Desktop
// _____________________________________________
// From 768px to ∞ (overrides ALL Tablet!)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
// your code
}
// From 1024px to ∞ (overrides big Tablet only!)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
// your code
}
//
// Tablet ONLY
// _____________________________________________
// This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width Magento mixins or media-target
// Between 768px and 1439px
& when (@media-target = 'desktop'), (@media-target = 'all') {
@media only screen and (min-width: @screen__m) and (max-width: calc(@screen__xl ~"- 1px")) {
// your code
}
}
//
// Desktop (style-l.css)
// _____________________________________________
// From 1440px to ∞
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
// your code
}
/*
* End: Out-of-the-box MEDIAQUERIES
*/