定義,我發現這個插件在線:媒體查詢和高度及寬度可變
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
}
但它沒有工作...
所有的想法,歡迎!並感謝您的幫助。
它的工作原理!謝謝。對於那些有類似問題的人,我這樣做:var newSize = window.matchMedia(「screen and(max-width:790px)」) if(newSize.matches){// do stuff } else else { //做其他的東西 } –