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

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

试试这个希望对你有帮助....

$(document).ready(function() {
function checkWidth() {
    var windowSize = $(window).width();

    if (windowSize <= 479) {
        console.log("screen width is less than 480");
    }
    else if (windowSize <= 719) {
        console.log("screen width is less than 720 but greater than or equal to 480");
    }
    else if (windowSize <= 959) {
        console.log("screen width is less than 960 but greater than or equal to 720");
    }
    else if (windowSize >= 960) {
        console.log("screen width is greater than or equal to 960");
    }
}

// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});

Answer 2

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

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

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

Media queries and height & width defined in variable

javascript

css

variables

media-queries

screen