仅使用 css 根据浏览器大小显示/隐藏 div？

Posted 2023-03-06

【中文标题】仅使用 css 根据浏览器大小显示/隐藏 div？

【英文标题】：show/hide div based on browser size using ONLY css?

【发布时间】：2013-07-28 01:28:20

【问题描述】：

我正在尝试根据浏览器大小显示/隐藏一些 div，仅使用 css 媒体查询...但似乎没有任何效果...请帮助，如果可以，让我知道我是什么做错了...提前谢谢！

这是我的 CSS ..

@media all and (max-width: 959px) 

    .content .700display:block;
    .content .490display:none;
    .content .290display:none;



@media all and (max-width: 720px) 

    .content .700display:none;
    .content .490display:block;
    .content .290display:none;



@media all and (max-width: 479px) 

    .content .700display:none;
    .content .490display:none;
    .content .290display:block;

这是我的html

<div class="content">
    <div class="700">this is the content for desktop</div>
    <div class="490">this is the content for tablet</div>
    <div class="290">this is the content for mobile</div>
</div>

【参考方案1】：

类名不能以数字开头。将其更改为例如x700,x490,x290，它应该可以工作

【讨论】：

谢谢！这行得通，顺便说一句，我还必须将@media all and (max-width: 959px) 更改为@media all and (min-width: 959px) ，因为它显示了所有 3 个 div 的 959px+ 再次感谢！

【参考方案2】：

class name 不能是数字，并且不能以 CSS 中的数字开头。这是一个示例，我更改了类名并且效果很好

http://jsfiddle.net/RtTsy/

【讨论】：

谢谢！这行得通，顺便说一句，我还必须将@media all and (max-width: 959px) 更改为@media all and (min-width: 959px) ，因为它显示了所有 3 个 div 的 959px+！再次感谢！

还有@Hushme - 感谢 jsfiddle 链接！真的很有帮助！

不客气，我很高兴有对你有用的东西