媒體查詢和高度及寬度可變

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

謝謝你的幫助！我試過你的代碼，但它搞亂了我的腳本。我會再試一次，仔細看看。再次感謝你！ –

媒體查詢和高度及寬度可變

回答

相關問題