如何使用媒体查询隐藏 <div>？答案

【问题标题】：How to hide a <div> with media queries?如何使用媒体查询隐藏 <div>？
【发布时间】：2014-05-21 15:00:54
【问题描述】：

我试图仅在我的 ipad 和移动版网站上隐藏某个 div 元素。我把它隐藏了，但如果有意义的话，它并不是真的“消失”了？它的位置是直到采取只是不可见的。有没有办法在移动设备和 ipad 上完全删除它，以便我的文本在这些平台上重新定位？

感谢您的帮助！

【问题讨论】：

您使用的是“display:none”而不是“visibility:hidden”吗？
我正在使用“display:none”谢谢。

【解决方案1】：

以下是设备的标准媒体查询列表

/* Large screens ----------- */
/*some CSS*/

/* Desktops and laptops ----------- */
@media only screen and (max-width : 1824px) {...}

/* iPads (landscape) ----------- */
@media only screen and (max-width : 1224px) {...}

/* iPads (portrait) ----------- */
@media only screen and (max-width : 1024px) {...}

/* Smartphones (landscape) ----------- */
@media only screen and (max-width : 768px) {...}

/* Big smartphones (portrait) (ie: Galaxy 3 has 360)*/
@media only screen and (max-width : 640px) {...}

/* Smartphones (portrait) (ie: Galaxy 1) */
@media only screen and (max-width : 321px) {...}

根据您在这些块中的要求，您需要添加 CSS，如下所示

.foo{display:none;} /* foo is class of element you need to hide*/

你可以使用display:none 或者如下图隐藏

.visuallyhidden { 
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

useful question

CSS-Tricks article

【讨论】：

感谢您的快速回复！我知道如何使用媒体查询来隐藏它，我遇到的问题是，在我使用“display：none”之后，它使它不可见，但实际上并没有将其删除。所以我不能将我的文本放在页面中心的位置。它把它推过去..
你能在发生这种情况的地方显示页面 URL/jsfiddle 等吗

【解决方案2】：

您必须使用.divclass{display:none;} display none 会将您的 DOM 元素隐藏到浏览器。没有证据表明那里有阻塞。

最终可见性属性 .divclass{ visibility:invisible; } 只对用户隐藏 DOM 元素。将显示空白背景而不是该块。

【讨论】：