使用 CSS 在移动设备上隐藏 div [英] Hide div on mobile devices, using CSS

问题描述

我想从移动设备隐藏一个包含 Facebook 点赞框小部件的 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 { 显示:无；}.mobile-hide{ 显示:无；}}

我做错了什么?使用 id 或类引用不起作用.

解决方案

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

<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>

I want to hide a div containing the facebook likebox widget from mobile devices. I tried this but it doesn't work.

div code:

<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 code:

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

What am i doing wrong? It does not work using the id or the class reference.

解决方案

For some reason (unknown to me) this worked:

<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>

这篇关于使用 CSS 在移动设备上隐藏 div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！