magento2 js 判断屏幕大小 mediaCheck( )

magento2 有响应式js文件

--------------------------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------------

麦进斗官方文档：http://devdocs.magento.com/

1. responsive.js

The responsive.js script implements specific responsive functions for the Blank and Luma themes. To manipulate JavaScript for the desktop or mobile view, responsive.js calls the mediaCheck()anonymous function from matchMedia.js.

The mediaCheck call looks as follows:

 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 */
        },
        // Switch to Mobile Version
        exit: function () {
            /* The function that toggles page elements from mobile to desktop mode is called here*/
        }
    }); /*...*/

英语论坛

  mediaCheck({
    media: '(max-width: 420px)',
    entry: function() {
      console.log('starting 420');
    },
    exit: function() {
      console.log('leaving 420');
    },
    both: function() {
      console.log('changing state');
    }
  });

     实例

var $demo = $('.demo-area');

  function smallScreen(mq) {
    if (mq.media)
    $demo.text('This is a smaller screen.');
    $demo.animate({
      backgroundColor: '#19ae2b'
    });
  }

  function largeScreen(mq) {
    if ($(document).width() >= 900) {
      // Note: Because this gets called by both media query checks,
      // it needs to make sure that it actually needs to apply so
      // it doesn't overwrite the smallScreen message.
      $demo.text('This is a larger screen.');
      $demo.animate({
        backgroundColor: '#d3811e'
      });
    }
  }

  function dude(mq) {
    $demo.text("Dude, that's a really big screen.");
    $demo.animate({
      backgroundColor: '#6814d3'
    });
  }

  mediaCheck({
    media: '(min-width: 900px)',
    entry: largeScreen,
    exit: smallScreen
  });

  mediaCheck({
    media: '(min-width: 1400px)',
    entry: dude,
    exit: largeScreen
  });

Options

英语论坛原文链接1：http://sparkbox.github.io/mediaCheck/ ：

点击打开链接

麦进斗官方文档原文链接2：http://devdocs.magento.com/guides/v2.2/frontend-dev-guide/responsive-web-design/rwd_js.html  

点击打开链接