CSS3 @ mediaは幅と高さの両方を判断します

定義

@mediaクエリを使用すると、メディアタイプごとに異なるスタイルを定義できます。
@mediaは、画面サイズごとに異なるスタイルを設定できます。特に、レスポンシブページをデザインする必要がある場合は、@ mediaが非常に便利です。
ブラウザのサイズをリセットすると、ブラウザの幅と高さに応じてページが再レンダリングされます。

使用する

幅と高さを同時に判断する必要 がある場合は、and 演算子を使用できます 。

次のコードは、高さが500px未満で、幅が600pxより大きいと判断します。 

@media screen and (max-height: 500px) and (min-width:600px){
    
    .toc{
        display:none
    }
    
    header, main {
            margin-left: 2em;
            margin-bottom: 3em;
    }
}