css - CSS レスポンシブ デザイン - 縦向き表示の検出

Question

次のように、純粋な CSS を使用して、画面のサイズに応じてスタイルシートを調整できることを私は知っています。

@media (max-width: 959px) {
  /* styles for smallest viewport widths */
}

@media (min-width: 600px) and (max-width: 959px) {
  /* styles for mid-tier viewport widths */
}

@media (min-width: 960px) {
  /* original CSS styles */
}

^{（ソース）}

横向きまたは縦向きのディスプレイで確認することは純粋なcssで可能ですか？

Answer 1

はい、次の構文を使用します。

@media all and (orientation: landscape) {}

詳細については、w3 仕様を参照してください。

Answer 2

向きを使用できます：

@media all and (max-width: 959px) and (orientation : portrait) {
    /* Styles */
}

Answer 3

w3から:

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }