0

私は、下部に固定位置を持つレスポンシブナビゲーションを作成しようとしています。ホーム、機能、タスクなどのように、すべてのliに異なる画像があります..! PCとiPadでは問題ありませんが、携帯電話では画像のサイズが小さくなりませんが、2行になりません。常に一行に収まるようにしたいのですが、モバイルでは画像サイズを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;
}
4

1 に答える 1

2

使用するすべてのタイプの画面 (PC、モバイル、iPad など) でより適切に表示するには、リンク@media screenを参照してください。

Web サイトはすべての画面に収まらないため、diff を設定します。差分のプロパティ。画面。

于 2013-06-17T13:41:12.217 に答える