我的移动端有点问题。我是从移动端开始构建的,所以我的媒体查询会在屏幕尺寸放大时处理它们。我有一个问题,当它放大时我可以隐藏我的移动 div,但是如果我想在我放大的媒体查询中有一个 div,它会隐藏 div 如果我把它放在移动设备中隐藏在那里它会杀死它以扩大规模?
html:
<div id="menumobile">
<div id="nav-mobile">
<a href="#"><img src="menu.jpg"/></a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
</div>
</div>
<div id="menularge">Main menu</div>
CSS:
#menumobile{
background-color: #FFF;
text-align:center;
}
#mainmenu{
display: none;
}
#nav-mobile {
display: block;
padding-top: 12px;
height: auto;
min-height: 33px;
overflow: hidden;
font-size: 0.9em;
background: none;
}
#nav-mobile, #nav-mobile ul, #nav-mobile li {
position: relative;
background: none;
}
#nav-mobile ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #F1F1F1;
padding: 20px 0 20px 0;
}
#nav-mobile ul li {
width: 100%;
display: block;
padding: 13px 0 13px 0;
margin: 0;
background: none;
}
#nav-mobile ul a{
color: #000;
text-decoration:none;
font-size: 18px;
}
#nav-mobile ul a:hover {
background: none;
color: #FFF;
}
#nav-mobile ul li:hover {
background-color: #005e48;
color: #FFF;
}
我的目标是#menularge id,所以我希望它隐藏在移动屏幕上并在放大时显示。但如果我将它隐藏在移动 css 中,它就会向上杀死它。
最佳答案
看起来您需要一个媒体查询。尝试这样的事情(将 600px 替换为您希望它显示的任何时间):
@media all and (min-width: 600px){
#mainmenu{
display: block;
}
}
您可以在此处了解有关媒体查询的更多信息:http://css-tricks.com/css-media-queries/ 它们对于响应式设计非常有用。
关于html - 在移动屏幕媒体查询上隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22939241/