媒体查询和高度及宽度可变

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 
    }

但它没有工作...

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

来源

2016-02-13 C.L

使用，如果（screen.width < = 480）可能无法onload事件工作，尝试使用window.matchMedia（）来匹配你的CSS媒体查询：

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

来源

2016-02-13 13:00:34

它的工作原理！谢谢。对于那些有类似问题的人，我这样做：var newSize = window.matchMedia（“screen and（max-width：790px）”） if（newSize.matches）{// do stuff } else else { //做其他的东西 } –

试试这个，希望有所帮助你....

$(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); 
});

来源

2016-02-13 12:54:28

谢谢你的帮助！我试过你的代码，但它搞乱了我的脚本。我会再试一次，仔细看看。再次感谢你！ –

媒体查询和高度及宽度可变

回答

相关问题