media queryについて

Question

position: absolute;
bottom: 0;
にしているのですが、このbottom: 0;を削除し
420px以下で
top:0;
に変更したいのですが、この時bottomは削除することができますか？

<!-- header -->
            <div id="header">

                <div id="sisi-box">
                    <img src="img/sisi.png" alt="唐獅子" id="sisi">
                </div>

                <div id="swirl-box">
                    <img src="img/ swirl.png" alt="" id="swirl1">
                    <img src="img/ swirl.png" alt="" id="swirl2">
                    <img src="img/ swirl.png" alt="" id="swirl3">
                    <img src="img/ swirl.png" alt="" id="swirl4">
                    <img src="img/ swirl.png" alt="" id="swirl5">
                    <img src="img/ swirl.png" alt="" id="swirl6">
                </div>

                <ul id="nav-box">
                    <a href="#window" id="work"><li>WORK</li></a>
                    <a href="#window" id="profile"><li>PROFILE</li></a>
                    <a href="#window" id="contact"><li>CONTACT</li></a>
                </ul>

                <div id="lant-box">
                    <a href=""><img src="img/lantern.png" alt="" id="lant"></a>
                </div>

            </div>

/*---------- head ----------*/
#header{
    border: solid 3px pink;
    width: 100vw;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: rgb(214 150 43);
}

/* sisi */
#sisi-box{
    border: solid 3px green;
    width: 70vw;
    
    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 250;
}

#sisi{
    height: 90vh;
}

#nav-box{
    border: solid 3px orange;

    position: absolute;
    bottom: 0;

    z-index: 750;
}

#nav-box,li{
    font-size: 35px;
    font-family: 'Permanent Marker', cursive;
    
    float: left;
    margin: 35px;
    
    list-style: none;
    color: black;
}

/* swirl */
#swirl-box{
    border: solid 3px pink;
    height: 100vh;
    width: 100vw;

    position: absolute;
}

#swirl1{
    height: 20%;

    position: absolute;
    top: 15%;
    left: 15%;
}

#swirl2{
    height: 20%;

    position: absolute;
    top: 35%;
    left: 5%;
}

#swirl3{
    height: 20%;

    position: absolute;
    top: 45%;
    left: 20%;
}

#swirl4{
    height: 20%;

    position: absolute;
    top: 15%;
    right: 15%;
    
}

#swirl5{
    height: 20%;

    position: absolute;
    top: 35%;
    right: 5%;
}

#swirl6{
    height: 20%;

    position: absolute;
    top: 45%;
    right: 20%;
}

/* lantern */
#lant-box{
    border: solid 3px white;
    height: 30%;

    position: absolute;
    bottom: 5%;
    left: 5%;

    z-index: 500;
}

#lant{
    height: 100%;
}

/* Less than window width 420px CSS */
@media screen and ( max-width:420px ){

/*---------- head ----------*/
#nav-box{
    top: 0;
    bottom: auto;
}
}

このようになっています。デベロッパーツールで確認したところ、
mediaqueryが反応していない可能性があるみたいです。

-----------------追記-----------------

こちらtoggle device toolbarでスマホ画面にした画面です。

こちらwindowsサイズで縮小した画面です。

Comments

[hiok]

まずは、メディアクエリが効いた状態で、どのcssが適用されてるか、優先順位がどうなっているか、を確認したらいかがでしょうか？
パソコンのブラウザを小さくして確認している場合、420pxになっていない可能性もありますので、一旦、@media screen and ( max-width:420px ){　を
@media screen and ( max-width:1000px ){　などとしてみて、
デベロッパツールで確認してみては？

[DrsriN]

返信遅れてすいません！先ほどchromeのデベロッパーツールで確認したところ確認したところ、windowサイズを手動で変えると正常に反応しました。Toggle device toolbarでスマホ表示にするとmediaqueryが反応しないみたいです。

[miyabi_pudding]

回答のコメントでも記載しましたが、
下の画像は、おそらく420px以上あります。
ブラウザウィンドウは、基本的に、縮小限界ありますので、
上のデベロッパーツールで表示できているのならばなんの問題もありません。
また、ブラウザはあくまでエミュレーターなので、実デバイスで確認した方がよいかと。

[hiok]

windows手動変更でメディアクエリが効いてる、ということは、サイトとしては正常に動作している、と言えるように思います。（かつ、スマホ実機で動作してるなら、ですが。）
なぜ、toggle device toolbarでの表示にこだわるのでしょうか？？

[DrsriN]

そうなのですね！スマホ実機でのローカルデータを表示したことがない（やり方が分からない）のでtoggle device toolbarを使用しています...（泣）

Answer 1

スタイルを初期化すると可能かと。

#nav-box{
  top: 0;
  bottom: inherit;
}

Comments

[DrsriN]

ご回答ありがとうございます！試したところ、どうやらmediaqueryが聞いてないようなのですが、おかしな点等ありますでしょうか...?

[miyabi_pudding]

あ、なるほど・・・。
確認しますので、少々お待ちを。

[miyabi_pudding]

というより、position: relative;　を効かせている要素がないようですが、その点はどうでしょうか？
position: absolute;は、position: relative;を効かせている要素を親に持つことが前提の値になります。
（でないと、ビューポートの左上が基準となる）

[DrsriN]

position: relative;は、このheadのさらに親要素のoutにつけていますので、問題ないかと思われます！

[miyabi_pudding]

それなら、大丈夫そうですね。
その旨、質問文に記載いただいた方がいいかもしれません。

mediaqueryが効いていない、というのは、どういう状況でしょうか？
スマホ端末で効かないのであれば、その端末自体も記載いただいた方がいいかと。
Androidは、論理ピクセルが、横420px以上の端末はけっこうありますので、
そういった端末では、本質問のmediaqueryは適用されません。

[DrsriN]

なるほど！了解いたしました！

/* Less than window width 960px CSS */
@media screen and ( max-width:960px ){

}

/* Less than window width 420px CSS */
@media screen and ( max-width:420px ){

/*---------- head ----------*/
#nav-box{
top: 0;
bottom: inherit;
}

このように書いていても、デベロッパーツールを用いてスマホ表示すると、反映されていないのです...

[DrsriN]

先ほどchromeのデベロッパーツールで確認したところ確認したところ、windowサイズを手動で変えると正常に反応しました。Toggle device toolbarでスマホ表示にするとmediaqueryが反応しないみたいです。

[miyabi_pudding]

解決したのであれば、自己解決の投稿か、BA選出して、質問を閉じましょう。

ただ、
> Toggle device toolbarでスマホ表示にするとmediaqueryが反応しないみたいです。

そんなわけないと思いますが・・・。

[DrsriN]

本当にできないのです...。
今、投稿の編集で追記画像を貼りました。

[miyabi_pudding]

それ、おそらく420pxじゃないですよ。
上の、数値で調整している方の画像は、
グレーの内枠で420pxなので、
下の画像は、450pxくらいでしょうね。

[DrsriN]

上の画像は、調整して420oxにしているのにも関わらず変更内容が反映されていません。
しかし、windowで横幅を変えた場合、変更内容が反映されます。

＞上のデベロッパーツールで表示できているのならばなんの問題もありません。

下の画像の配置をmediaqueryで実現したいのですが...。

[miyabi_pudding]

あ、下を実現したいのですね。

ブラウザの表示を更新してください。
メディアクエリの反応は、遅い場合があります。
（スマホ実機の場合は、最初からそのサイズなので、即時反映だが、デベロッパーツールでの変更は反応が遅れる場合がある）

また、420pxの時にしたいのであれば、
max-width: 421pxにしましょう。
あれ、以上、ではなく、以降なので、確か。

[DrsriN]

なるほど！反映速度の問題なのですね。
了解いたしました！

[miyabi_pudding]

遅いって言うと語弊ありましたね、すみません。速度の問題ではありません。
デベロッパーツールのシミュレータは、切り替えた段階では、ユーザーエージェントが切り替わってない、など、完全反映はされない状態です。
なので、更新ボタンを押して完全反映させる必要があります。

また、mediaqery自体が、再レンダリング時に、若干タイムラグがあり、処理が走るため、
手動でウィンドウの大きさを変えた場合は、反映の余地がありますが、
シミュレータの場合は、一瞬でサイズが切り替わるため、mediaqueryの処理が追いつかないからかと思われます。