How to use responsive.js in a theme derived from Luma?

Question

The Magento DevDocs says

You can use the menu.js, responsive.js and matchMedia.js to add responsive behavior in your custom theme. If your theme inherits from Blank or Luma, you do not even need to additionally include the script files in your theme.

But what does this actually mean in practice? I need to alter some css classes/onclick behaviour based on the media query, but if I don't even need to additionally include the script files in my theme, how does it work?

Answer 1

You are doing correct but need to do some more steps. Below, I have listed steps for it.

• First copy responsive.js file from vendor/magento/theme-frontend-blank/Magento_Theme/web/js/ file and put it in your theme at app/design/frontend/Vendor/Theme/Magento_Theme/web/.

• Now add your change in that app/design/frontend/Vendor/Theme/Magento_Theme/web/responsive.js file.

• Now run cache flush command and then run setup static content deploy command.

• You can see your changes are reflecting.

As per Magento, you can add your own media match as added in that responsive.js file.

Here is one example of it. You can change media: '(min-width: 768px)' code as per requirement.

mediaCheck({
    media: '(min-width: 768px)',

    /**
     * Entry in the width.
     */
    entry: function () {
       put your code here when device screen width less then '768px'.  
    },

    /**
     * Exit from the width.
     */
    exit: function () {
       put your code here when device screen width more then '768px'.  
    }
});

Answer 2

Add the below file in your theme.

File:- app/design/frontend/[Vendor]/[Theme]/web/js/responsive.js

  define([
    'jquery',
    'matchMedia',
    'mage/tabs',
    'domReady!'
], function ($) {
    'use strict';
     //Write your code here
});

if not reflects changes then hit below commands and check

sudo php bin/magento setup:static-content:deploy -f
sudo php bin/magento ca:cl
sudo php bin/magento ca:fl