Question

我在这个fiddle

中有一个超级简单的水平菜单

但是，在尝试使其响应时，我遇到了一些问题。首先，在大屏幕上，不应出现菜单按钮。但查询无效。

然后，在小屏幕中，只有菜单按钮应该是可见的，其他链接在悬停/点击/点击时可见...但是当我在查询中尝试它时，它会隐藏其他链接而不能让它们可用

在小屏幕上，菜单会更改为display: block（所需行为），但它不会在标题上“浮动”。相反，它使整个标题更高。

最后，立即购买按钮。我无法在小屏幕中垂直居中

/* ************************************
General
************************************ */
html, body, header, main { margin: 0; padding: 0; }
html, body { color: #292828; font-family: ‘Trebuchet MS’, Helvetica, sans-serif; }
header, main { display: block; width: 100%; }
body { background-color: #cccccc; }
header { background-color: #292828; height: 70px; max-height: 70px;
	/* Overlay */
	position: fixed; top:0; left: 0; z-index: 999;
}


/* ************************************
Menus
************************************ */
#menu-links li {
	display: inline-block;
}
#menu-links li a {
	color: #fff;
	font-size: 0.75em;
	text-decoration: none;
	text-transform: uppercase;

	height: 30px;
	padding: 0em 1em 0em 1em;

	display: inline-block;
	vertical-align: middle;
	line-height: 30px;
	text-align: center;
}
.buy-now a {
	border: 2px solid #44dbbd;
	border-radius: 2px 2px 2px 2px;
	background-color: #44dbbd;
	transition: color 2s ease-out;
}
.buy-now:hover { background-color: #292828; }


/* ************************************
Media queries
************************************ */
@media (min-width:10em) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
	header { height: 40px; }
  main { padding: 40px; }
  #menu-links-button { display: block }
	#menu-links { background-color: #292828; }
	#menu-links li { display: block; }
	#menu-links li a { line-height: 10px; }
}
@media (min-width:20em) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
	header { height: 70px; }
  main { padding: 70px; }
  #menu-links-button { display: none; }
  #menu-links { background-color: #292828; }
	#menu-links li { display: inline-block; }
	#menu-links li a { line-height: 30px; }
  
}

<header>
    <ul id="menu-links">
        <li id="menu-links-button"><a href="#">&#9776;</a></li>
        <li><a href="/">Home</a></li>
        <li><a href="/">Blog</a></li>
        <li id="buy-now" class="buy-now"><a href="#">Buy Now</a></li>
    </ul>
</header>


<main>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
  
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</main>

如何在媒体查询中隐藏和正确放置菜单？

0 个答案: