javascript添加调整大小功能

Question

我需要添加一个resize函数，以便我可以检查然后在窗口调整大小上应用类。 我无法使用媒体查询，所以我必须使用javascript。

＆＃13;

＆＃13;

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'
}

＆＃13;

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

.over{
  background:#808;
}

.under{
  background:#f00;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>