メディアクエリの書き方(min-width, max-width)

2022/11/17

メディアクエリを利用することで、ユーザが使用しているディスプレイに応じて異なるCSSを適用させることができます。

min-width、max-width

@media screen and (max-width: 1000px) {/* スクリーンサイズが1000px以下の場合に適用 */} 
 
@media screen and (max-width: 767px) {/* スクリーンサイズが767px以下の場合に適用 */} 
 
@media screen and (max-width: 480px) {/* スクリーンサイズが480px以下の場合に適用 */} 
 
@media screen and (max-width: 320px) {/* スクリーンサイズが320px以下の場合に適用 */} 
 
@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */}

min-width と max-width を併用すると可読性が低下します。どちらか一方を利用することをおすすめします。

モバイルファースト

デフォルトはモバイル向けのスタイルで、スクリーンサイズが拡大していくごとにスタイルを上書きする書き方です。

/* モバイル向けのスタイル */
 
@media screen and (min-width: 768px) {/* スクリーンサイズが768px以上の場合に適用 */} 
 
@media screen and (min-width: 1200px) {/* スクリーンサイズが1200px以上の場合に適用 */}

デスクトップファースト

デフォルトはデスクトップ向けのスタイルで、スクリーンサイズが縮小していくごとにスタイルを上書きする書き方です。

/* デスクトップ向けのスタイル */
 
@media screen and (max-width: 1199px) {/* スクリーンサイズが1199px以下の場合に適用 */} 
 
@media screen and (max-width: 767px) {/* スクリーンサイズが767px以下の場合に適用 */}

よかったらシェアしてね！