使用事件侦听器编辑媒体查询 CSS答案

【问题标题】：Edit Media queries CSS with event listener使用事件侦听器编辑媒体查询 CSS
【发布时间】：2017-09-26 13:16:55
【问题描述】：

我有一个无序列表<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 的控制台日志都是空的''

【问题讨论】：

你的@media 规则里面没有样式规则。那些风格声明去哪儿了？

标签： javascript html css media-queries

【解决方案1】：

转换不起作用，因为您将显示从/更改为 none。此外，您需要在数值之间转换height（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
}

【讨论】：

您错过了这样一个事实：max-width: 414px 表达式必须在括号中，并且 matchMedia() 函数返回一个包含 .matches 属性的 MQL，该属性应该是在条件中测试的属性，如影魔指出。
您好，谢谢！我在显示部分的帮助下修复了它！是的，它不适用于过渡和变换，“显示”。但是在让我的

【解决方案2】：

因为这条线，它不工作，你的控制台是空的

if(window.matchMedia("max-width: 414px")) {

应该是

 if (window.matchMedia("(max-width: 414px)").matches) {

并且转换不适用于 display:none 和 height:auto..

你可以试试opacity，而不是display。

我做了一个样本fiddle..

然后尝试查看控制台，您会发现它不再为空。

【讨论】：