- Pour utiliser
min-widthetmax-widthdans la même déclaration, voir l’exemple donné pour Tablet - Pour soustraire 1px à une valeur déclarée dans une variable du core (
@screen__xlpar exemple), se référer à l’exemple donné pour Tablet. L’utilisation decalc()est obligatoire car les valeurs des variables du core incluent l’unité (@screen__xl: 1440pxpar exemple) et que, contrairement à ce qu’indique la documentation officielle (dont l’exemple est FAUX!!!), il ne faut pas déclarer(max-width: @screen__xl - 1)mais bien(max-width: calc(@screen__xl ~"- 1px")). Merci les gars pour le mal de tête, hein.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/* * 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 */ |