javascript resize関数を追加する

Question

ウィンドウのサイズ変更を確認してからクラスを適用できるように、サイズ変更関数を追加する必要があります。 私はメディアクエリを使用することができないので、私はjavascriptを使用して達成する必要があります。あなたはメディアqueriiesを使用できない理由

var mq = window.matchMedia("(min-width: 640px)"); 
 
var el = document.getElementById('output'); 
 

 
if (mq.matches) { 
 
    el.innerHTML ='640 and over'; 
 
    el.className += 'over' 
 
} else { 
 
    el.innerHTML ='640 and under'; 
 
    el.className += 'under' 
 
}

#output{ 
 
    padding:20px; 
 
    color:#fff; 
 
} 
 

 
.over{ 
 
    background:#808; 
 
} 
 

 
.under{ 
 
    background:#f00; 
 
}

<div id="output"></div>

Answer 1

var el = document.getElementById('output'); 
 
function checkSize() { 
 

 
    if(window.innerWidth >= 640) { 
 
     el.innerHTML = '640 and over'; 
 
     el.className = 'over' 
 
    } else { 
 
    el.innerHTML = 'under 640'; 
 
    el.className = 'under' 
 
    } 
 

 
} 
 
window.addEventListener("resize", checkSize) 
 
checkSize()

#output{ 
 
    padding:20px; 
 
    color:#fff; 
 
} 
 

 
.over{ 
 
    background:#808; 
 
} 
 

 
.under{ 
 
    background:#f00; 
 
}

<div id="output"></div>