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时，网格12-11被隐藏并替换为grid12-12。

目前正在显示两个div＆gt; 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

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

这似乎符合你的期望：

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

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

请注意，如果您的标准规则（非媒体）以＆＃34; div＆＃34;为前缀，则它将无法运行（取决于处理规则的顺序以及您使用的浏览器）。< / p>

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

3 个答案: