Written by Kasumi

スマホを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法

スマホのデバイスを横向き・縦向きに切り替えた時だけ任意のCSSを実行したい。

本記事ではこのような悩みを解決。

実装方法について解説します。

スマホが横向きの場合

//横向きの場合
@media (orientation: landscape) {
  .mv {
    height: auto;
  }
}

スマホが横向きの時だけCSSを当てるコード例です。

メディアクリエリのorientationを使います。

orientationの値にlandscapeを指定。

横向きの時だけメディアクエリ内で設定したプロパティが付与されます。

スマホが縦向きの場合

//縦向きの場合
@media (orientation: portrait) {
  .mv {
    height:100vh;
  }
}

スマホが縦向きの時だけCSSを当てるコード例です。

前章と同じくメディアクリエリのorientationを使います。

orientationの値にportraitを指定。

縦向きの時だけメディアクエリ内で設定したプロパティが付与されます。

まとめ

スマホのデバイスを横向き・縦向きに切り替えた時だけ任意のCSSを実行する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS

CSSでテキスト選択を不可・禁止にする方法

2023.01.26
1513
HTMLCSS

CSSでテキストにグラデーションをかける方法(便利なジェネレーターも紹介)

2022.07.03
4895
HTMLCSS

CSSで見出しの左右に1本の斜線を引く方法

2022.11.27
2278
HTMLCSS プログラミング

【簡単】CSSでフォントサイズ(font-size)を10px以下で表示する方法

2022.02.19
5002