レスポシブサイトを作成するときにCSS記述でスタイルを切り替えることができる便利なMedia Queries。
スマホを横に向けた場合だけにCSSを当てたい場合につまずきました。
解決したのでその方法と注意をメモします。
スタイルシートを一枚でレスポンシブサイトを制作する場合にはこのMedia Queriesの指定方法に気をつけましょう。

PC表示とスマホの両方で縦横記述が使える

ここが注意点です。一部のサイト様ではスマホを傾けた場合の記述方法として紹介していますがPCとスマホ両方に反映されてしまうMedia Queriesを紹介されていました。

以下がPCやスマホ等の全てのデバイスで縦横判定してくれるMedia Queriesの記述です。

PC/スマホの横向き指定

@media only screen and (orientation:landscape) {
/* style */
}

PC/スマホの縦向き指定

@media only screen and (orientation:portrait) {
/* style */
}

スマホの縦横判定のMedia Queries

(orientation:＊＊＊) をメディアクエリに記載します。
サイズ指定があれば「max-device-width:480px」、縦向きであれば「min-device-width:320px」を追記します。

スマホの横向き指定

@media only screen and (orientation:landscape) {
/* style */
}

スマホの縦向き指定

@media only screen and (orientation:portrait) {
/* style */
}

以上となります。サイズ指定がある場合は「and (max-device-width:480px) 」を記載します。

ユーザーエージェント判定などを導入してPCとスマホのスタイルシートを分けている場合にはこの記述は必要ないかもしれません。

個人的に一つのファイルで全デバイスに対応させることに最近ハマっているので気をつけたいと思います。