根据屏幕宽度隐藏/显示 div答案

【问题标题】：Hide/Show Div Depending on Screen Width根据屏幕宽度隐藏/显示 div
【发布时间】：2014-09-18 05:29:30
【问题描述】：

当屏幕低于一定宽度时，我目前正在使用 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，而不是替换块。

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

【问题讨论】：

嗯，应该直截了当-> jsfiddle.net/hA2sg
感谢 Adeneo！显示的想法：无；我没想到！你是救生员！谢谢！

标签： javascript jquery html css

【解决方案1】：

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

这似乎符合您的预期：

@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”为前缀，它将不起作用（取决于处理规则的顺序以及您使用的浏览器）。

【讨论】：

【解决方案2】：

检查这个：http://jsfiddle.net/Mohamed_nabil/cHQcD/

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

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

【讨论】：

【解决方案3】：

无需更改媒体查询

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

【讨论】：