ブラウザの画面が横長か縦長かを判定する【css】

hoge

ブラウザの画面で、横長か縦長かを判定して、画像を横長か縦長に設定したいと思った。

cssのメディアクエリのorientation要素で可能。

スマホ、タブレット、PCに適用される。

 

CSS

/* 縦長 */
@media screen and (orientation: portrait) {
 .bg{background:url("./img/tatenaga.PNG") center / cover no-repeat; }
}

/* 横長 */
@media screen and (orientation: landscape) {
  .bg{background:url("./img/yokonaga.PNG") center / cover no-repeat; }
 }

いやー本当に便利！！