Question

我试图仅在我的网站的ipad和移动版本上隐藏某些内容。我隐藏了它，但它并不是真的＆＃34;已经消失了＃34;如果这有道理？它的位置直到看不见。有没有办法在移动设备和ipad上完全删除它，以便我的文本在这些平台上重新定位？

感谢您的帮助！

Answer 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

Answer 2

你必须使用.divclass{display:none;} display none将你的DOM元素隐藏到浏览器中。没有阻止那里的证据。

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

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

2 个答案: