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＆lt; = 480）可能无法使用onload，请尝试使用window.matchMedia（）来匹配您的CSS媒体查询：

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

媒体查询和身高＆amp;变量中定义的宽度

2 个答案: