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

我想从移动设备上隐藏包含facebook likebox小部件的div。我试过这个，但它不起作用。使用CSS隐藏移动设备上的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或类引用。

来源

2013-06-04 Christos Baziotis

你有这个元素的任何其他CSS规则？ – Adrift

什么是设备上的宽度分辨率，它可能大于720 –

我甚至试过960.我不认为这是问题所在。 –

出于某种原因（未知对我）这工作：

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

来源

2013-06-05 00:05:41

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

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

有关该标签的更多信息，请参阅：Understanding The Viewport Meta Tag。

来源

2013-06-04 16:09:04 Dan

这是我的视口元标记。 –

试试这个。

.mobile-hide{ visibility: hidden; }

编辑：抱歉，意思是把能见度。

来源

2013-06-04 16:12:02 Matt

我刚试过。不工作:( –

好的，我有这个问题，回到了一些奇怪的原因，它只有当我把我的媒体查询规则在CSS的末尾工作。不知道这是为什么，也许是某种错误，但试试看，如果可行的话让我们知道。

来源

2013-06-04 17:29:56 Charles

为什么不把邪恶!important添加到您的display: none？

来源

2013-06-04 18:39:43 Daniel

如果您是在流体网格布局工作，DW已经创建了3个媒体查询为您服务。若要隐藏在手机DIV仅适用于：

#div{ display:none; } 的诀窍是，你必须加入这一行平板

#div{ display:block; //or inline or anything, how you wish to display it }

它为我，希望它是有用的。

来源

2014-01-01 12:25:59 endi97

我个人认为你的“显示”参数是错误的，请尝试使用可视性。我测试了它，它为我工作。

这应该为你工作：

@media only screen and (min-device-width: 0px) and (max-device-width: 720px) {div#facebook {visibility:hidden;}}

我想你甚至可以忘记使用类。

来源

2014-01-11 20:29:49

只删除“和（分设备宽度：0像素）”

来源

2014-06-24 22:39:19 Laurent

尝试这些工作对我来说。

例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; } 
}

description link

来源

2015-11-05 15:30:49

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

回答

相关问题