javascript - 根据屏幕宽度隐藏/显示 Div

Question

我目前正在使用 CSS 在屏幕低于特定宽度时隐藏一个 div 部分。这一点工作正常，但我正在努力思考如何在隐藏 div 时显示替换 div。

我可能会以错误的方式处理它，但这是我的代码:

@media all and (max-width: 955px) { 
    div.grid12-11 {
        display: none;
    }
}

@media all and (max-width: 954px) {
    div.grid12-12 {
        display: block;
    }
}

我想要实现的是当屏幕宽度低于 955px 时，grid12-11 被隐藏并替换为 grid12-12。

目前两个 div 都显示 > 955px 而不是替换 block 。

有更好/正确的方法吗？

Answer 1

无需更改媒体查询

   div.grid12-12 {
       display: none; // make it hidden on default view
   }

   @media all and (max-width: 955px) { 
        div.grid12-11 {
            display: none;
        }
         div.grid12-12 {
            display: block;
        }
    }