Question

我正在尝试使用底部固定位置进行响应式导航，每个li都有不同的图像，如家，功能，任务等等。它在PC和ipad上很好，但在手机上它并没有减少li中图像的大小，而是将它们分成两行我不想要的。我希望他们总是留在一条线上，但在移动设备上减少了li中的图像尺寸，以便它们适合。我也不知道为什么导航元素不是中心对齐的，它们很多都是正确的。

HTML

<body class="body">

<div class="top_bg">
  <div class="logo"><a href="http://www.onbreath.com"><img src="images/logo.png" alt="Breath" border="0"></a></div>
  <a href="">
  <div class="options">Options</div>
  </a>
</div>


All page content comes here



<div class="bottom_bar">

    <nav><ul>
            <li><a href="#"><img src="images/home_r.png" ></a></li>
            <li><a href="#"><img src="images/tasks.png" ></a></li>
            <li><a href="#"><img src="images/checks.png" ></a></li>
            <li><a href="#"><img src="images/messages.png" ></a></li>
            <li><a href="#"><img src="images/toplist.png" ></a></li>
    </ul></nav>

</div>


</body>
</html>

CSS

body {
    background-color: #b00000;
    margin: 0px;
    height: auto;
}

img, embed, object, video {
max-width:100%;
height:auto;
}


.body {
    background-image: url(../images/bg.jpg);
    width: 100%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    clear: both;
    min-height: 100%;
    padding-bottom: 180px;
    height: auto;
}

.bottom_bar {
    background-image: url(../images/bottombar_bg.png);
    background-repeat: repeat-x;
    bottom: 0px;
    z-index: 1;
    clear: both;
    background-color: #af0007;
    height: 88px;
    width: 100%;
    position: fixed;
} 
.bottom_bar_buttons {
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    width: 70px;
    height: 60px;
}


.bottom_bar nav {
    text-align: center;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    height: 88px;
}

.bottom_bar nav ul {
    list-style: none;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    margin-top: 0px;
}

.bottom_bar nav ul li {
    display: inline;
    margin: auto;
}

.bottom_bar nav a:link, .bottom_bar nav a:visited {
    color: #fff;
    display: inline-block;
    text-decoration: none;
    margin-right: 3%;
    margin-left: 0%;
    margin-top: 15px;
    margin-bottom: 0px;
}
.bottom_bar nav a:hover, .bottom_bar nav a:active,
.bottom_bar nav .active a:link, .bottom_bar nav .active a:visited {
    color: #fff;
    text-shadow: none !important;
}

.bottom_bar nav li a {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

Answer 1

为了更好地显示所有类型的屏幕（例如，个人电脑，手机，ipad等），您想使用@media screen，请参阅link

由于网站不适合所有屏幕，因此您需要设置差异。 diff的属性。屏幕。

使用图像进行响应式导航

1 个答案: