- Exploiter les media queries dans les fichiers styles LESS (CSS)
- Avoir recours aux media queries dans les fichiers JS
Exploiter les media queries dans les fichiers styles LESS (CSS)
Variables de breakpoints
Les surcharges de valeurs de breakpoints existants (déjà déclarés dans un thème parent) se font dans le fichier _theme.less de votre thème enfant.
Utilisation des mixins .media-width fournis par Magento 2 et code compilé
Les fichiers CSS styles-m.less et styles-l.less sont auto-générés par Magento 2 lors de la compilation des fichiers *.less. Il ne faut PAS les recréer à la main dans vos thèmes enfants. Si on respecte les bonnes pratiques de déclaration des media-queries dictées par la doc officielle, on peut déclarer autant de fois qu’on veut un même breakpoint dans nos sources *.less et toutes nos déclarations seront regroupées sous une seule dans les fichiers *.css finaux. Exemple:
|
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 |
# Source LESS .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { // your code body { border: 12px solid red; } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { // your code body { background-color: pink; } } .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) { // your code body { font-size: 26px; } } # Rendu CSS généré @media only screen and (max-width: 639px) { body { border: 12px solid red; } body { background-color: pink; } body { font-size: 26px; } } |
Avoir recours aux media queries dans les fichiers JS avec matchMedia
Doc officielle – JavaScript in Magento responsive design.
Utiliser matchMedia directement dans une vue *.phtml
Le code ci-dessous affiche une bordure rose sur les écrans de Mobile (dont la résolution est inférieure à 768px) et bleue sur les écrans dont la résolution est plus large.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> requirejs([ 'jquery', 'matchMedia' ], function($, mediaCheck){ 'use strict'; mediaCheck({ media: '(min-width: 768px)', // Switch to Desktop Version entry: function () { /* The function that toggles page elements from desktop to mobile mode is called here */ $('body').css('border', '12px solid aqua'); }, // Switch to Mobile Version exit: function () { /* The function that toggles page elements from mobile to desktop mode is called here*/ $('body').css('border', '12px solid pink'); } }); }); </script> |
Utiliser matchMedia depuis un fichier *.js
Attention: de part la nature « protectrice » de requireJS, le code encapsulé dans votre fichier Js ne sera pris en compte qu’après avoir été déclaré dans une vue *.phtml ou (mauvaise pratique) dans un JS inclus à l’arrache (dans app\design\frontend\<Vendor_name>\<theme_name>\Magento_Theme\layout\default_head_blocks.xml par exemple) et non-contrôlé par requireJS.
Dans mon exemple, je crée un fichier app\design\frontend\<Vendor_name>\<theme_name>\web\js\mediaqueries.js:
Attention, à retenir: il faut bien encapsuler le code qui doit être exécuté au chargement de la page dans une fonction anonyme $(function(){ // mon code ici... });. Sinon, pas d’exécution. C’est du jQuery 😉
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
require([ 'jquery', 'matchMedia' ], function($, mediaCheck){ 'use strict'; $(function () { // to ensure that code evaluates on page load mediaCheck({ media: '(min-width: 768px)', // Switch to Desktop Version entry: function () { /* The function that toggles page elements from desktop to mobile mode is called here */ $('body').css('border', '12px solid aqua'); }, // Switch to Mobile Version exit: function () { /* The function that toggles page elements from mobile to desktop mode is called here*/ $('body').css('border', '12px solid pink'); } }); }); }); |
Dans le fichier app\design\frontend\<Vendor_name>\<theme_name>\requirejs-config.js, je déclare mon nouveau fichier mediaqueries.js et je le rends disponible pour requireJS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var config = { map: { '*': { 'jsMediaqueries': 'js/mediaqueries' } }, // Shim: when you're loading your dependencies, requirejs loads them all // concurrently. You need to set up a shim to tell requirejs that the library // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends // on jQuery). shim: { 'jsMediaqueries': { deps: ['jquery'] } } }; |
Dans un fichier *.phtml, je fais exécuter le code se trouvant dans le fichier mediaqueries.js:
|
1 2 3 |
<script> requirejs(['jquery', 'jsMediaqueries'], function($, jsMediaqueries){}); </script> |