特定分辨率时隐藏html元素答案

【问题标题】：Hide html element when specific resolution特定分辨率时隐藏html元素
【发布时间】：2014-01-11 04:27:28
【问题描述】：

我正在使用twitter bootstrap 3.0。当屏幕分辨率更改为更小时，菜单更改为移动视图。我有一个包含图像的div 滑块，所以当我的菜单更改为移动视图时（当屏幕分辨率较小时），我想隐藏那个div。

我尝试在我的 div visible-desktop visible-tablet 上应用 css 类，但它不起作用。

我还有其他办法吗？

【问题讨论】：

【解决方案1】：

要在超小（纵向移动）屏幕宽度上隐藏元素，请使用

<div class="d-none d-sm-block">

默认情况下隐藏 (.d-none)，但在小型或大型设备上可见。

如果您使用的是 Bootstrap v3，他们更改了响应式实用程序类名称。见http://getbootstrap.com/css/#responsive-utilities

你可能想要.hidden-xs

【讨论】：

【解决方案2】：

考虑使用媒体查询。类似的东西

@media screen and (max-width:480px) {
    .mydiv {display:none}
}

【讨论】：

FYI Bootstrap 使用 来检测小屏幕
仅供参考，不，它没有，但我们知道你的意思。
我在 2013 年写那条评论时确实如此 ~ getbootstrap.com/docs/3.3/css/#responsive-utilities-classes。当前版本（5.1）使用 576px 作为extra-small device breakpoint

【解决方案3】：

您只需应用 Bootstrap 类，如 here 所示。您也可以在那里测试它们，如果您调整浏览器屏幕的大小，您可以检查哪些是活动的。

<div class="hidden-xs">This is the div that will hide on mobile</div>

只能在低于 768 像素（手机）的任何屏幕中看到

【讨论】：

【解决方案4】：

你可以把那个 div .hidden-xs.. 的类放进去。这样更简单。您只是说这个 div 在台式机和平板电脑上可见，而不是告诉它在小型设备中不可见。

【讨论】：