Javascript 将document.documentElement.clientWidth设置为变量

我试图根据屏幕大小显示更多/更少的列表项。我想这是工作负载和作为页面的大小手动调整

如果我直接使用$document.innerWidth或document.documentElement.clientWidth，它可以正常工作，但是如果我将它们中的任何一个设置为变量并尝试使用它，它就会停止工作。有什么好处

// Doesn't work
var getWidth = document.documentElement.clientWidth;

if (getWidth <= 559) {
    // hide some list items
}

// Works
if (document.documentElement.clientWidth <= 559) {
    // hide some list items
}

---

下面是一个jsbin示例：

不要为此使用JavaScript。使用CSS媒体查询。仅从您的JSBin中，我注意到，当页面启动时，如果宽度大于559，则在底部列表中显示三项。我的猜测是，设置变量的代码只运行一次，将变量分配给当时的值。document.documentElement.clientWidth会实时更新，但变量不会更新。我还需要添加“查看更多”链接，并切换隐藏列表项的可见性。这只是我遇到的问题的一个配对示例。你可以使用CSS显示你的链接并切换任何内容。仍然可能可行。当前JSBin行为的CSS唯一示例：