多媒体查询无效

时间：2017-01-06 08:45:37

标签： html css3 media-queries

所有工作正在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 &amp; 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 &amp; 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>

1 个答案:

答案 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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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;
  }
相关问题
最新问题