移动和桌面布局上的 CSS 显示答案

【问题标题】：CSS display on mobile and desktop layout移动和桌面布局上的 CSS 显示
【发布时间】：2019-08-21 15:19:10
【问题描述】：

我很难修复它。也许我只是 css 的菜鸟。基本上，我希望该图标仅在网站的移动版本中可见。

在 767px 以上我把这段代码隐藏起来。 .neighbourhood-img img {display:none;}

我的问题是，我怎样才能使它在 767px 宽度以下可见..

谢谢！

【问题讨论】：

我们需要更多背景信息来帮助您。

标签： html css

【解决方案1】：

嘿，看看这个 css

@media screen and (min-width: 768px) {
    .neighbourhood-img img {display:none;}
}

@media screen and (max-width: 767px) {

        .neighbourhood-img img {display:block;}

}

【讨论】：

我认为第二个media querie 没有必要； display:none 样式仅在满足指定条件时出现。你不同意吗？

【解决方案2】：

你需要的是media queries。尝试：

@media screen and (min-width: 768px) {
    .neighbourhood-img img {display:none;}
}

当屏幕宽度至少为768px时会隐藏

您可以在此处阅读有关media queries 的更多信息：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

【讨论】：

【解决方案3】：

您可以使用 CSS 中可用的媒体查询来定义满足特定条件的样式，在您的情况下，条件将是屏幕宽度。

【讨论】：

【解决方案4】：

使用 Css 类：

.neighbourhood-img img 
{
display:block;
}

【讨论】：

【解决方案5】：

我想我明白你在问什么。如果您只希望它在移动版本上可见，那么您可以执行以下操作：

创建一个新的CSS规则：

@media only screen and (max-width: 767px) {
    .m-show {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

然后将您的图标包装在 div 标签中，如下所示，并使用样式隐藏它（但使其类成为 m-show 类）：

<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>

如果它不在 767 的最大宽度内，它将隐藏它，否则它会显示它。希望这是有道理的。我还建议将 div 标签中的内联样式设置为单独的 CSS 类（只是因为我不喜欢内联样式）。

【讨论】：

@tomloprod 你介意我问为什么不吗？ -- 编辑：我也看到赞成的答案更有意义