各種デバイスの横幅によって振り分けることが多い[Media Queries]ですが、デバイスが縦長か横長かの状態によってでも振り分けが可能です。

使用するのは「orientation」要素。
縦長の場合は「portrait」を。
横長の場合は「landscape」を指定します。
また、縦横が同じ長さの場合は「portrait」が適用されるようです。


デバイスが縦長の状態の場合

@media screen and (orientation: portrait) {
// ここに処理を書く
}

デバイスが横長の状態の場合

@media screen and (orientation: landscape) {
// ここに処理を書く
}

注意する点としては、スマートフォンやタブレットを含むすべてのデバイスに適応されること。
当然PCのディスプレイサイズにも依存します。