Question

我只是想为我的网站修改较小设备的导航栏。该网站应保留iPad和分辨率的固定设计，然后对较小的分辨率做出响应。虽然移动大小的特定代码适用于某些类（容器，主要等），但它们似乎不适用于导航div。您可以在此处查看其当前的运作方式：http://moore.whiterabbitstudio.us/

这是永久性的小提琴：http://jsfiddle.net/ursalarose/xAp72/ HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<body>
<div class="container">
  <div class="main-hold">
    <div class="main">
      <div id="nav">
        <ul>
            <li><a href="index.html" class="current">Home</a></li>
          <li><a href="about.html">About Us</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="process.html">Process</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>

CSS：

body
{
    display: table;
    margin: 0 auto;
    letter-spacing: .1em;
    text-align: center;
    font-size: 16px;
}

*
{
  margin:0;padding:0;  
}

html,body
{
    height:100%;   
}

.container {
    height: 100%;
    display: table-cell;   
    vertical-align: middle;  
}

.main-hold {
    height:600px;
    width:1000px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.main {
    height:540px;
    width:900px;
    background-position: left top;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

/* MOBILE DEVICES */
@media screen and (max-width: 950px){

.main-hold {
    width:500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin-top: 0px auto;
}
.main {
    width:100%;
    background-repeat:no-repeat;
    background-position:center top;
    margin-top: 0px auto;
}
#nav {
    margin: 20px auto 0 auto;
    float:none;
    width: 100%;
}
#nav ul {
    list-style:none;
    }
#nav li {
    width: 100%;
    }
#nav li a {
    font-size: 14px;
    text-decoration:none;
    color:#888;
    display: block;
    text-align:center;
    width: 100%;
    height: 22px;
    display: inline;
    background-color:#CCC;
    background-image: none;
    padding-right: 0px;
    padding-top: 6px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
#nav li a:hover, #nav li a.current {
    background-color:#FFF;
}

}


/* NAVIGATION */
#nav {
    float: left;
    height: 250px;
    width: 168px;
    margin-top: 60px;
}
#nav ul {
    list-style:none;
    }
#nav li {
    width: 168px;
    height: 28px;
    display: block;
    margin-bottom: 8px;
    }
#nav li a {
    font-size: 14px;
    text-decoration:none;
    color:#888;
    display: block;
    text-align: right;
    width: 148px;
    height: 22px;
    display: block;
    padding-right: 20px;
    padding-top: 6px;
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
#nav li a:hover, #nav li a.current {
    background-color:#fff;
}

感谢您的帮助！我以前从没尝试过设计移动设备。

Answer 1

尝试将移动CSS放在桌面CSS下面，因为桌面CSS现在正在覆盖移动css。

移动CSS不申请导航

1 个答案: