デバイスが縦長の場合文字の色を黒く横長の場合灰色にします。
デバイスが横長の場合、縦長の反対の振る舞いになるようにCSSを記述してみます。
cssの内容
@media screen and (orientation: portrait) {
.portrait_text {
color: black;
}
.landscape_text {
color: gray;
}
}
@media screen and (orientation: landscape) {
.portrait_text {
color: gray;
}
.landscape_text {
color: black;
}
}動作
PCのブラウザでウィンドウサイズを変更し横長⇒縦長にしたところ文字の色が変更されることが確認できました。
Androidスマートフォンでも動作することを動作を確認しました。
コメント