移动端和桌面端布局中CSS的显示方式

Question

我很难修复它，也许我只是对CSS非常新手。 基本上，我希望图标仅在站点的移动版本中可见。

在767px以上，我使用以下代码使其隐藏：.neighbourhood-img img {display:none;} 我的问题是，如何使其在小于767px的宽度下可见？

谢谢！

- Abs Duls

---

我们需要更多的上下文来帮助你。 - Mimo

Answer 1

嘿，看一下这个 CSS：

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

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

        .neighbourhood-img img {display:block;}

}

- Soundhar Raj

---

我认为第二个“媒体查询”是不必要的；只有在满足指定条件时，才会出现display:none样式。你同意吗？ - tomloprod

Answer 2

您需要的是称为“媒体查询”的东西。请尝试以下内容：

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

当屏幕宽度至少为768px时，它将被隐藏。

您可以在此处阅读有关媒体查询的更多信息：

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

- tomloprod

Answer 3

你可以使用CSS中可用的媒体查询来定义符合特定条件的样式，对于你的情况，条件将是屏幕宽度。

- Vikash Kesarwani

Answer 4

使用CSS类：

.neighbourhood-img img 
{
display:block;
}

- Sagar

Answer 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类（只是因为我不喜欢内联样式）。

- adrian

---

@tomloprod，你介意我问为什么吗？--编辑：我也看到了得到赞同的答案更有道理。 - adrian