所有工作正在800 px，1100px，1400px，导航栏没有显示，因为我认为400 px媒体查询与其他查询重叠。我需要有关如何让导航栏显示的帮助...
CSS代码：
@media screen and (min-width: 400px)
{
header {
padding: 1%;
}
header h1 {
position: relative;
left: 0.5%;
bottom: 10%;
}
header div{
display: none;
}
nav.sitenavigation {
}
nav.sitenavigation ul {
border: 3px solid #34180f;
display: none;
background-color: #B8944D;
position: absolute;
right: 5%;
top: 80%;
z-index: 1;
}
nav.sitenavigation ul li {
display: inline-block;
}
.navigation-menu-button {
float: right;
}
article.container{
padding:0%;
}
figure {
display: none;
}
aside {
display: none;
}
aside p {
display: none;
}
}
@media screen and (min-width:800px),print
{
header h1 {
position: absolute;
top: 8%;
left: 28.0%;
}
header div{
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 36.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 0%;
}
#contentstart {
padding-right: 0%;
}
figure {
display: none;
}
aside {
display: inline;
}
aside p {
position: relative;
left: 3.5%;
margin: 2% 0 0 5%;
padding-right: 5%;
}
}
@media screen and (min-width:1100px){
header h1 {
position: absolute;
top: 5.5%;
left: 37%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
.navigation-menu-button {
display:none;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 43.5%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 50%;
}
#contentstart {
padding-right: 50%;
}
figure {
position: absolute;
left: 50%;
bottom: 28.7%;
margin: 2% 2% 0 0.3%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
margin: 1% 0 0 0%;
}
}
@media screen and (min-width:1400px) {
body {
width: 1400px;
}
header h1 {
position: absolute;
top: 7%;
left: 42%;
}
header div {
display: inline;
position: relative;
right: 39%;
}
nav.sitenavigation {
position: relative;
bottom: 2%;
padding: 0.3%;
}
ul li {
display:inline;
margin-right: 2%;
position: relative;
left: 47.1%;
}
article {
width: 62.6%;
padding: 2%;
}
article p {
padding-right: 54%;
padding-bottom: 2%;
}
figure {
position: absolute;
left: 45%;
bottom: 1%;
top: 0.2%;
margin: 2%;
}
aside {
display: inline;
width: 30%;
}
aside p {
position: relative;
left: 3%;
padding: 2% 6% 0 6%;
padding-right: 7%;
margin: 1% 0 0 0%;
}
}
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Revisions Bookstore & Cafe</title>
<!--
Revisions Bookstore and Cafe main web page
Filename: index.html
Author: Wong Wan Zhen Sofia
Date: 5 January 2017
HTML5 and CSS3 Illustrated Unit I, Visual Workshop
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.40753.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="images/android.png">
</head>
<body>
<div class="container">
<p class="skipnavigation"><a href="#contentstart">Skip navigation</a> </p>
<header>
<h1>Revisions Bookstore & Cafe</h1>
<div>
<img src="images/logo.gif" width="120" height="100" alt="">
</div>
</header>
<nav class="sitenavigation">
<div class="navigation-menu-button">
<img src="images/menu.png" width = "60" height="60" alt="Show Navigation">
</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="releases.html">New Releases</a></li>
</ul>
</nav>
<article>
<div class="container">
<h2 id="contentstart">10th Anniversary Sale!</h2>
<figure><img src="images/browsing.jpg" width="500" height = "378" alt="picture of person browsing"></figure>
<p>10% off our top 10 best sellers</p>
<p>Buy any two books, get a third at 50% off</p>
<p>In-store giveaways every day this month</p>
<p>Through November 30</p>
</div>
</article>
<aside>
<p>Custom brewed coffee and hand-selected books.</p>
<p>Special orders are our specialty.</p>
</aside>
<footer>
<p>412 N. 25th St.</p>
<p>Richmond, VA 23223</p>
<p>(804) 555-2565</p>
</footer>
</div>
<script src ="script.js"></script>
</body>
</html>
答案 0 :(得分：-1)
尝试使用bootstrap进行响应和移动优先。快速为您演示。
HTML：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Logo -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">COLLAPSE NAVBAR</a>
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_cholai">-->
<!--<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-repeat"></i> Cho lại</a>-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_boqua">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-refresh"></i> Bỏ qua</a>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_new">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-floppy-saved"></i> Thêm Mới</a>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_sua">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-edit"></i> Sửa</a>
</div>
</div>
<!--<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--<div class="input-group" id="wm_btn_luu">-->
<!--<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-floppy-save"></i> Lưu</a>-->
<!--</div>-->
<!--</div>-->
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_them">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-plus"></i> Thêm</a>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_xoa">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-remove"></i> Xóa</a>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="input-group" id="wm_btn_huy">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-trash"></i> Hủy</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_in">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-print"></i> In</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_inkemchidinh">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-list-alt"></i> In kèm chỉ
định</a>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="input-group" id="wm_btn_ketthuc">
<a href="#" class="input-group-addon button-load"><i class="glyphicon glyphicon-off"></i> Kết thúc</a>
</div>
</div>
CSS：
.row {
margin-bottom: 5px;
margin-top: 10px;
}
#wm_header {
width: 100%;
min-height: 22px;
margin: 0;
/*background-image: linear-gradient(to bottom, #428bca 0px, #2d6ca2 100%);*/
/*background-repeat: repeat-x;*/
background-color: #428bca;
border-color: #2b669a;
color: #ffffff;
font-weight: bold;
padding: 5px;
font-size: 15px;
}
.input-label {
/*background-color: #428bca;*/
background-color: #fff;
border: 0;
font-weight: 700;
min-width: 110px;
text-align: left;
}
.input-group {
margin-bottom: 5px;
margin-top: 10px;
}
.input-group-addon:first-child {
text-decoration: none;
font-weight: bold
}
.button-load {
cursor: default;
background-color: #428bca;
color: #fff;
font-weight: bold;
}