Responsive Navigation with images

问题

I am trying to make a responsive navigation with fixed position in bottom, every li have a different image in it like home, features, tasks and so on..! it is fine on PC and ipad but on mobile phone it does not decrease the size of images in li but brings them into two lines which I dont want. I want them to always stay in one line but on mobile decrease the images size in li so they fit. I also dont know why nav elements are not center aligned, they are alot at right.

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;
}

回答1:

For better display in all type of screens (ie. pc, mobile, ipad, etc) you want to use @media screen please refer the link

Because web-site will not fit to all screens, you want to set diff. properties for diff. screens.

来源：https://stackoverflow.com/questions/17147859/responsive-navigation-with-images

标签

html

mobile

navigation