如何使用CSS隐藏特定高度或宽度的div [重复]

Posted 2023-03-06

【中文标题】如何使用CSS隐藏特定高度或宽度的div [重复]

【英文标题】：How to hide div for specific height or width using CSS [duplicate]

【发布时间】：2015-12-05 17:19:20

【问题描述】：

我正在创建一个响应式网站。我使用这样的东西来隐藏一些移动显示的元素：

@media (max-width: 599px)  
.hidden-mob
         display: none !important; 
           


// and then add "hidden-mobile" class for arbitrary elements

现在我需要从 height 方面检查一些元素。我试过这个：@media (max-height: x) 但我不知道为什么它不起作用。另外需要注意的是我需要一个OR，我想要这个条件：

If current-height <= x or current-width <= y Then hide element

如何使用 CSS 实现上述条件？

【参考方案1】：

使用, 实现OR 条件。

@media (max-width: 599px), (max-height: 700px) 
  .hidden-mob 
    display: none;
  

<div class="hidden-mob">Hidden below 599px width or when height is below 700px</div>

【讨论】：

工作正常，tnx，为你 +1 投票 ...

只是为了了解更多我想知道的信息，css中and的符号是什么？

and 将检查两个条件是否为真。所以如果你在上面的代码中将,替换为and，那么只有当高度和宽度分别减小到700px和599px以下时，文本才会被隐藏。

查看更多信息：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…

有多种媒体类型： media_type: all |听觉 |盲文|手持|打印 |投影 |屏幕 | tty |电视 |浮雕您的代码将仅限于屏幕媒体支持设备。