在响应式屏幕上隐藏div

我想用CSS隐藏facebook像框。我用这个：在响应式屏幕上隐藏div

.fb-like-iframe.fb_iframe_widget { 
    display: none !important; 
}

但这种工作，但仅适用于大显示器和它仍然显示在移动设备上。

当我在桌面上调整网页大小并使其宽度变小时，会出现响应式更改和fb-like-iframe的临界点。

我试图用这个隐藏它的移动很好，但没有成功做到远：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .fb-like-iframe.fb_iframe_widget { 
     display: none !important; 
    } 
}

来源

2017-05-08 Lucian Barligea

我们可以看到这是原位，即发布一个URL代码是请，所以我们可以检查它。我的直觉是将这个小部件放入一个封闭的div中，然后根据视口宽度媒体查询显示或隐藏该div。 –

这里是链接：http://www.quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=true只需点击开始并选择任何答案。之后，等待几秒钟模式弹出。 –

代替min-device-width和max-device-width可以使用min-width和max-width。或者更好的效果，你可以只用max-width ..

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen (max-width : 480px) { 
    .fb-like-iframe.fb_iframe_widget { 
    display: none !important; 
    } 
}

来源

2017-05-08 06:02:55

@Abhishek Pandey，是的，我同意你的看法，但是OP可以根据他的要求定义最大宽度。我只是告诉他们他做错了什么。 –

我也试过，它不起作用。这里是链接：quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=t rue只需点击开始并选择任何答案。之后，等待几秒钟模式弹出。 –

你目前正在使用此：

@media screen and (min-width: 768px) 
.fb-like-iframe.fb_iframe_widget { 
    display: none !important; 
}

只是改变(min-width: 768px)到(max-width: 768px) 让我知道，如果这是你所需要的

来源

2017-05-08 06:32:44

我也试过，没有运气。你可以在这里看到：http://www.quizuri.ro/quizzes/cate-patrate-sunt-in-imagine/1026?embed=true –

你能截图什么是你想隐藏的确切东西吗？ –

这里是截图http://i.imgur.com/IoWiSBT.png（手机）http://i.imgur.com/EirOWHe.png（桌面）我也做了一个视频，显示响应临界点桌面移动https://www.youtube.com/watch?v=NpUONG6MGfE –

style.css与缩小版本之间存在冲突，导致它不能仅在移动设备上工作。

.fb-like-iframe.fb_iframe_widget { 
 
    display: none !important; 
 
}

，我已经修复它，现在的原代码（以上）的作品桌面和移动上。谢谢

来源

2017-05-08 11:46:57

在响应式屏幕上隐藏div

回答

相关问题