@media

メディアの形態(横が◯◯px以下の画面に適用、画面の向きが変わったら、解像度が◯◯以下になったら)によって適用させたいCSSを記述できます。

  • max-width
  • min-width

@mediaを使う場合、viewportを指定しなければなりません。

viewportスマホなど画面サイズが異なる場合の表示領域を指定してくれます。

viewportに関して - hrt0kmt's blog


css

# 480px以下の画面サイズにwrapperクラスを適用します

@media (max-width: 480px) {
  .wrapper {
    margin: 0 -15px !important;
  }
}