#033 – JavaScript 中的媒体查询

当我们对网站进行桌面化时,我们将主页导航移动到页面右侧,以便在左侧腾出空间用于显示更多内容。我们希望仅在屏幕足够大时才添加此内容。而不是一直加载它并在移动设备上隐藏它。那样就不是非常符合移动优先的思维方式,对吧?

我们基本上需要测试窗口宽度,然后如果它足够宽,则通过 ajax 加载一些内容。我们如何找出窗口宽度?我们查看了许多方法。我们直接测量它。我们使用 matchMedia() 来测试媒体查询。我们最终使用了名为 Enquire.js 的小型库来为我们提供媒体查询回调函数。