Question

我很难解决它。也许我只是非常喜欢CSS。基本上，我希望图标仅在网站的移动版本中可见。

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

我的问题是，如何在767像素宽以下显示它。

谢谢！

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

}

Answer 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

Answer 3

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

Answer 4

使用Css类：

.neighbourhood-img img 
{
display:block;
}

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

CSS显示在移动和桌面布局上

5 个答案: