画面の縦横の長さでスタイルを変える

CSSの@mediaのorientationで、画面の縦横の長さによってスタイルを指定できます。

• portrait
  画面が縦長のときに適用されます。
• landscape
  画面が横長のときに適用されます。

<div class="box">box</div>

.box {
  padding: 20px;
}
@media (orientation: portrait) {
  .box {
    background-color: red;
  }
}
@media (orientation: landscape) {
  .box {
    background-color: blue;
  }
}

上のboxの色が、画面が縦長のときは赤、画面が横長のときは青になります。

これを使って、スマホの画面の向きに応じてスタイルを変えることもできます。ただし、あくまで画面が縦長か横長か判断しているだけで、スマホの向きを取得するものではありません。