【CSS】メディアクエリチートシート

メディアクエリとは

表示された画面環境に応じて適用するスタイルを切り替える機能のこと

@media screen and (min-width: 560px) {
  /* スタイル */
}

画面サイズ

スマートフォン

スマホ縦 - 320px 〜 480px
スマホ横 - 480px 〜 812px

iphone5320px
iphone6/7/8/SE375px
iphone6/7/8 Plus414px
iphoneX375px
Pixel 2411px
Galaxy S5360px

タブレット

タブレット縦 - 768px 〜 1024px
タブレット横 - 1024px 〜 1366px

iPad768px
Android8インチ600px

パソコン

1024px 〜

MacBook13インチ1440px
MacBook16インチ1792px

ブレイクポイント

ブレイクポイントとは

ここでのブレイクポイントの意味は、メディアクエリの起点となる画面サイズのこと

スマホ縦480px
スマホ横600px
タブレット縦768px
タブレット横1024px
パソコン1200px

書き方

〇〇px以上

@media screen and (min-width: 〇〇px) {
  /* スタイル */
}

〇〇px以下

@media screen and (max-width: 〇〇px) {
  /* スタイル */
}

おすすめ(2020年5月最新)

おすすめ1

PCベースでブレイクポイントを560pxと960pxとする書き方

@media screen and (max-width: 959px) {
  /* タブレット用のスタイル */
}
@media screen and (max-width: 559px) {
  /* スマホ用のスタイル */
}

おすすめ2

PCベースでブレイクポイントを768pxと1024pxとする書き方

@media screen and (max-width: 1023px) {
  /* タブレット横用のスタイル */
}
@media screen and (max-width: 767px) {
  /* スマホ、タブレット縦用のスタイル */
}