CSS显示在移动和桌面布局

Question

我花了很长时间来修复它。也许我只是对css很生疏。基本上，我希望图标只在移动版本的网站可见。

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

我的问题是，我怎么能使它在低于767px的宽度可见…

谢谢!

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 class:

.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类(只是因为我不喜欢内联样式)。