使用CSS在移动设备上隐藏div

Question

我想在移动设备上隐藏包含facebook likebox小部件的div.我试过这个,但它不起作用.

div代码:

<div id="facebook" class="fb-like-box mobile-hide" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>

css代码:

@media screen and (min-width: 0px) and (max-width: 720px) {
  #facebook { display: none; }
  .mobile-hide{ display: none; }
}

我究竟做错了什么？它使用id或类引用不起作用.

Answer 1

确保您的页面定义了一个视口元标记.

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

有关此标记的详细信息,请参阅:了解Viewport元标记.

Answer 2

试试这些对我有用。

示例 1：

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: block !important; }
}

示例 2：

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: none !important; }
}

说明链接

Answer 3

出于某种原因(我不知道)这有效:

<div  class="mobile-hide">
<div class="fb-like-box" data-href="https://www.facebook.com/mypage" data-width="220" data-height="250" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>