隐藏/显示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，而不是替换该块。

有没有更好/正确的方法来做到这一点？

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;
        }
    }

Answer 2

检查此： http : //jsfiddle.net/Mohamed_nabil/cHQcD/

@media (max-width: 955px) { 
    div.gridFirst {
        display: none;
    }
}

@media (min-width: 955px) {
    div.gridSecond {
        display: none;
    }
}

Answer 3

您的初始规则如何设置？ 我认为您遇到了特异性问题。 如果您的“标准”规则与媒体查询中的规则相同或更具体，则媒体查询将不会覆盖它们。

这似乎可以达到您的期望：

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

.grid12-11 { display:block; }
.grid12-12 { display:none; }

请注意，如果您的标准规则（非媒体）以“ div”为前缀，则该规则将不起作用（取决于处理规则的顺序以及所使用的浏览器）。