时间戳

首页 > 解决方案 > 纯 JS 基础断点更改事件监听器

javascript - 纯 JS 基础断点更改事件监听器

问题描述

基础文档使用 JQuery 监听断点变化

https://get.foundation/sites/docs/media-queries.html

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
     if (
    (oldSize === "small" && newSize === "large") ||
    (oldSize === "small" && newSize === "xxlarge") ||
    (oldSize === "medium" && newSize === "large") ||
    (oldSize === "medium" && newSize === "xxlarge")
  ) {
    //my custom function
    displayFacets("desktop");
  } else if (
    (oldSize === "xxlarge" && newSize === "small") ||
    (oldSize === "large" && newSize === "small") ||
    (oldSize === "large" && newSize === "medium") ||
    (oldSize === "xxlarge" && newSize === "medium")
  ) {
    displayFacets("mobile");
  }
});

如何在纯 JS 中转换它？

标签： javascriptzurb-foundation

解决方案

目前还不清楚你到底在想什么。但是您可以使用matchMedia实现类似的目标。例如，您可以创建一个 EventListener 来响应某个 MediaQuery 是否匹配。请参阅此示例：https ://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange

编辑：好的，在您对示例进行更改后，可以看出您实际上只想区分移动设备和桌面设备。您可以使用提到的功能很容易地实现这一点：

const mql = window.matchMedia('(max-width: 600px)');
mql.onchange = (e) => {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    displayFacets("mobile");
  } else {
    /* the viewport is more than than 600 pixels wide */
    displayFacets("desktop");
  }
}

推荐阅读