Javascript未在教程中声明窗口大小

我正在学习Lynda.com关于响应式网络体验的教程。我的Javascript基本上正常工作。从指导老师那里，JS的目标是“我们根据窗口外径确定窗口宽度”。然后我们输出该信息以及屏幕是小屏幕、中屏幕还是大屏幕（@media断点）

如图所示，“945（931+14）较大”。就是接受它

问题在于，随着窗口宽度的变化，“大”不会先变为“中”再变为“小”

谢谢

如果有帮助的话，下面是一个包含所有HTML/CSS代码的示例。这是JS

/*JavaScript文档*/
var windowSize=''；
var windowWidth=0；
var实际值=0；
$（文档）.ready（函数（）{
checkBrowserSize（）；
loadHero（）；
});	
函数checkBrowserSize（）{
windowWidth=window.outerWidth；
var contentWidth=$（'body'）.width（）；
var sizeDiff=窗口宽度-内容宽度；
actualSize=窗口宽度-大小Diff；
如果（actualSize>800）{newWindowsSize='large'；}
如果（actualSize 500）{newWindowsSize='medium'；}
如果（actualSize您的问题是函数仅在文档准备就绪时运行一次。您必须将函数绑定到onresize事件，以便函数在每次触发resize事件时运行（请阅读事件处理程序）

下面是一个JavaScript示例：

下面是一个jQuery示例：
一般来说，制作一个func'来检查窗口宽度，然后返回一个结果，告诉您大小或“键”（例如“大”）。然后为窗口上的
resize
事件添加一个eventlistener，然后使用该函数的结果在resize时更改大小。