我有一个 Bootstrap 菜单,它会在浏览器变小时折叠。我还有第二个菜单,它在小型设备上消失并出现在折叠的第一个菜单中。它在 Firefox 中运行良好,但在 safari 和 chrome 中运行不佳。这是我的代码:
li.hideshow {
display: none;
}
@media screen and (max-width: 500px),
screen and (-webkit-min-device-pixel-ratio: 1) {
img.smallResolution {
max-width: 220px;
}
li.hideshow {
display: block;
}
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#point1">publisher</a>
</li>
<li><a href="#point2">advertiser</a>
</li>
<li><a href="#point3">news</a>
</li>
<li><a href="#point4">contact</a>
</li>
<li class="hideshow"><a href="#">point5</a>
</li>
<li class="hideshow"><a href="#">point6</a>
</li>
<li class="hideshow"><a href="#">point7</a>
</li>
</ul>
</div>
我搜索了很多,但没有找到答案。我希望有人能看到这里出了什么问题。
谢谢。
最佳答案
您不需要使用每个尺寸定义来定义屏幕。
这应该可以解决问题:
li.hideshow {
display: none;
}
@media handheld, screen and (max-width: 500px) and (-webkit-min-device-pixel-ratio: 1) {
img.smallResolution {
max-width: 220px;
}
li.hideshow {
display: block;
}
}
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#point1">publisher</a>
</li>
<li><a href="#point2">advertiser</a>
</li>
<li><a href="#point3">news</a>
</li>
<li><a href="#point4">contact</a>
</li>
<li class="hideshow"><a href="#">point5</a>
</li>
<li class="hideshow"><a href="#">point6</a>
</li>
<li class="hideshow"><a href="#">point7</a>
</li>
</ul>
</div>
关于html - Safari 和 Chrome 媒体查询不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31517482/