javascript - 变量中定义的媒体查询和高度和宽度

Question

我在网上找到了这个插件:

https://github.com/frenski/quizy-memorygame

您可以猜到，这是一个内存游戏，您可以在其中选择要显示在卡片上的图像。这很棒。但问题是我正在尝试使用媒体查询来提高响应速度，并且效果很好，直到我意识到卡片的宽度和高度不仅在 CSS 中定义，而且在变量中定义。

var quizyParams = {itemWidth: 156, itemHeight: 156, itemsMargin:40, colCount:3, animType:'flip' , flipAnim:'tb', animSpeed:250, resultIcons:true, randomised:true }; 
    $('#tutorial-memorygame').quizyMemoryGame(quizyParams);
    $('#restart').click(function(){
      $('#tutorial-memorygame').quizyMemoryGame('restart');
      return false;
    });

如何根据屏幕大小更改 itemWidth 和 itemHeight？这可能吗？

我尝试使用如下函数:

if(screen.width <= 480){
        //change width and height to this
    }else if (screen.width <= 780){
        //change width and height to that
    }else (screen.width <= 960){
        //change width and height to this
    }

但是没用...

欢迎所有想法!并感谢您的帮助。

Answer 1

使用 if (screen.width <= 480) 可能无法加载，请尝试使用 window.matchMedia() 来匹配您的 CSS 媒体查询:

  if (window.matchMedia('(max-width: 480px)').matches) {
    //...
  } else {
    //...
  }