带图像的响应式导航答案

【问题标题】：Responsive Navigation with images带图像的响应式导航
【发布时间】：2013-06-17 12:48:33
【问题描述】：

我正在尝试制作一个底部固定位置的响应式导航，每个 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;
}

【问题讨论】：

图片必须100%填满li的宽度？
尝试：nav li a img {width:100%;height:auto;}

标签： html mobile navigation

【解决方案1】：

为了在所有类型的屏幕（即电脑、手机、ipad 等）上更好地显示，您想使用@media screen，请参考link

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

【讨论】：