orientation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
orientation
は CSS のメディア特性で、ビューポート (またはページ付きメディアではページボックス) の向きを調べるために使用することができます。
メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。
構文
orientation
特性は以下の一覧のうち一つのキーワード値で指定します。
キーワード値
例
HTML
html
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
CSS
css
body {
display: flex;
}
div {
background: yellow;
}
@media (orientation: landscape) {
body {
flex-direction: row;
}
}
@media (orientation: portrait) {
body {
flex-direction: column;
}
}
結果
仕様書
Specification |
---|
Media Queries Level 4 # orientation |
ブラウザーの互換性
BCD tables only load in the browser