Question

所以我正在尝试为移动网站制作一个导航栏以反映iOS 7的风格。它在我的Nexus上看起来很好，但在iPhone上，元素叠加在一起，因为它有多小iPhone屏幕是（320px）。

以下是导航栏目前的样子：JsFiddle

CSS：

#bar-container {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: auto;
    margin-bottom: 3em;
    background-color: #fff;
    border-bottom: 1px solid #a1a1a1;
}
#nav {
    width: 50%;
    height: auto;
    margin: 1em 25% 1em 25%;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid #0775FF; 
    border-top: 2px solid #0775FF;
    border-right: 2px solid #0775FF;
    border-left: 2px solid #0775FF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius:6px;
    text-align: center;
    font-family: Body;
    color: #0775FF;
    vertical-align: middle;
    background-color: #fff;
}
#nav li {
    display: inline-block;
    vertical-align: middle;
    width:160px;
    color: #0775FF;
    font-family: Body;
}
#nav li a {
    display: inline-block;
    width:160px;
    padding: 8px 0px 1px 0px;
    text-decoration: none;
    font-weight: bold;
    color: #0775FF;
    vertical-align: middle;
    text-align: center;
}
#nav li a:hover {
    color: #fff;
    display: inline-block;
    background-color: #0775FF;
}
#nav li.pressed a {
    background-color: #0775FF;
    display: inline-block;
    color: #fff;
}

HTML：

<div id="bar-container">
  <ul id="nav">
    <li class="pressed"><a href="#">call</a></li>
    <li><a href="#">missed</a></li>
  </ul>
</div>

这就是我想要的：http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/v2_article_large/public/2013/06/18/ios-7-phone-recents.PNG

如何使其适用于所有屏幕分辨率？

创建iOS风格的CSS菜单栏

0 个答案: