我有一个导航栏,可以启动Teamspeak和Gary的Mod,但我希望它能在移动设备上消失。谁能帮我吗?
HTML
<div class="navbar">
<ul class="nav">
<li class="nav"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak</a></li>
<li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">US Server</a></li>
<li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a></li>
</ul>
</div
CSS
header.main_nav{
padding: 1% 0;
display: block;
}
.logo{
margin: 3% auto;
text-align: center;
}
.logo a{
font-size: 3vw;
color: #fff;
text-decoration: none;
border: 3px solid #fff;
border-radius: 15px;
text-transform: uppercase;
padding: 2px 10px 0 10px;
margin: 0;
}
.logo a:hover{
background-color: #fff;
color: #000000;
}
如果你使用bootstrap你可以使用该类:
hidden-xs
和/或
hidden-sm
这个类基本上是一个媒体查询,一种有条件的运行CSS。在此示例中,当屏幕小于767px时,类hidden-xs
将为display: none
。
@media (max-width: 767px) {
.hidden-xs {
display: none !important;
}
}
在这种情况下,Bootstrap有很多类可以帮助你准备好使用很多宽屏。
[MDN - 媒体查询 - CSS]
你的意思是这样的吗?
<style>
header.main_nav {
padding: 1% 0;
display: block;
}
.logo {
margin: 3% auto;
text-align: center;
}
.logo a {
font-size: 3vw;
color: #fff;
text-decoration: none;
border: 3px solid #fff;
border-radius: 15px;
text-transform: uppercase;
padding: 2px 10px 0 10px;
margin: 0;
}
.logo a:hover {
background-color: #fff;
color: #000000;
}
@media ( max-width : 400px) {
ul li.disappear a {
display: none;
}
}
</style>
<div class="navbar">
<ul class="nav">
<li class="nav disappear"><a class="nav" href="ts3server://ts.santosrp.com/">TeamSpeak</a></li>
<li class="nav disappear"><a class="nav" href="steam://connect/158.69.123.91:27015">US Server</a></li>
<li class="nav"><a class="nav" href="steam://connect/158.69.123.91:27015">EU Server</a></li>
</ul>
</div>