■スクリーンサイズが●px以下の場合に適用
@media screen and (max-width: ●px)
■スクリーンサイズが●px以上の場合に適用
@media screen and (min-width: ●px)
●モバイルファースト
スクリーンサイズが拡大していくごとにスタイルを上書き
例)
スクリーンサイズが768px以上の場合に適用
@media screen and (min-width: 768px)
スクリーンサイズが1200px以上の場合に適用
@media screen and (min-width: 1200px)
●デスクトップファースト
スクリーンサイズが縮小していくごとにスタイルを上書き
例)
スクリーンサイズが1199px以下の場合に適用
@media screen and (max-width: 1199px)
スクリーンサイズが767px以下の場合に適用
@media screen and (max-width: 767px)