javascript - 使用事件监听器编辑媒体查询 CSS

Question

我有一个无序列表 <ul>我也想添加一个事件监听器如果它适合某个媒体查询。

原始CSS:

        @media (max-width: 414px) {
          transition: all 3s ease-out;
          height: 0px;
          display: none;
        }

事件监听函数:

    if(window.matchMedia("max-width: 414px")) {
      console.log(list.style.height);
      console.log(list.style.display);
      list.style.height = 'auto'
      list.style.display = 'unset'
    }

帮助:转换似乎不起作用，list.style.height 和 list.style.display 的控制台日志都是空的 ''

Answer 1

转换将不起作用，因为您正在将显示从 none 更改为/更改为。此外，您需要在数值之间转换高度(auto 不算)。

CSS:

@media (max-width: 414px) {
    transition: all 3s ease-out;
    height: 0;
}

JS:

if (window.matchMedia("(min-width: 414px)").matches) {
  list.style.height = list.style.height + 'px'; // set the exact height
}