各種デバイスの横幅によって振り分けることが多い[Media Queries]ですが、デバイスが縦長か横長かの状態によってでも振り分けが可能です。
使用するのは「orientation」要素。
縦長の場合は「portrait」を。
横長の場合は「landscape」を指定します。
また、縦横が同じ長さの場合は「portrait」が適用されるようです。
デバイスが縦長の状態の場合
@media screen and (orientation: portrait) { // ここに処理を書く }
デバイスが横長の状態の場合
@media screen and (orientation: landscape) { // ここに処理を書く }
注意する点としては、スマートフォンやタブレットを含むすべてのデバイスに適応されること。
当然PCのディスプレイサイズにも依存します。