1

応答性を高めるために作成していたポートフォリオWebサイトを再構築しているときに、問題に遭遇しました。ご覧のとおり、画面の上部にナビゲーションメニューがありますが、スマートフォンで表示したときに、そのナビゲーションを画面の下部に配置したいと思います。

fixed通常、これは画面の左上隅にあるnav要素を含むヘッダーであるため、（この場合は）iPhoneのメディアクエリでルールを指定します。

topをtop：noneに変更します。（私はとにかく有効だとは思わない）そして底を追加する：0; したがって、ナビゲーションメニューのルールはbottom: 0;とのleft: 0;代わりにtop: 0;とになりleft: 0;ます。

奇妙なことに、私はそれを正しく動作させることができないようです。

以下は私のCSSです：

    /* this is inside @media all */
header {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:60px;
    border-bottom:1px solid #108ac2;
    box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
    background:#fff;
    opacity:.9;
}

header nav {
    width:960px;
    margin:0 auto;
}
    /* this is inside @media screen and (max-width: 480px)  */
header {
    position:fixed;
    bottom:0!important;
    left:0!important;
}

header nav {
    width:90%;
    margin:0;
    height:80px;
}

私がこれを構築しているテストサイトもここで見ることができます：私のテストポートフォリオ。

よろしくお願いします。これは以前に聞いたことがあると思いますが、ここでは本当に見つかりません...よろしくお願いします！

4

1 に答える 1

0

cssが@media画面に適用されると、それは続行され、@mediaもすべて適用されます。これが問題の原因だと思います。そこで、ヘッダーの上部と本文の余白にcssを追加しましたが、これでうまくいくようです。

    /* this is inside @media all */
header {
    position:fixed;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:60px;
    border-bottom:1px solid #108ac2;
    box-shadow:1px 1px 1px 1px rgba(16,138,194,0.76);
    background:#fff;
    opacity:.9;
}

header nav {
    width:960px;
    margin:0 auto;
}
    /* this is inside @media screen and (max-width: 480px)  */
header {
    position:fixed;
    bottom:0!important;
    left:0!important;
    top: initial;
}

header nav {
    width:90%;
    margin:0;
    height:80px;
}
body {
    margin:0 0 100px 0;
}
于 2013-03-24T10:54:13.290 に答える