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

メディアクエリとは

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

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

画面サイズ

スマートフォン

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

iPhone5 320px
iPhone6/7/8/SE 375px
iPhone6/7/8 Plus 414px
iPhoneX 375px
Pixel2 411px
Galaxy S5 360px

タブレット

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

iPad 768px
Android 8インチ 600px

パソコン

1024px 〜

MacBook 13インチ 1440px
MacBook 16インチ 1792px

ブレイクポイントとは

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

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

書き方

〇〇px以上

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

〇〇px以下

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

〇〇pxより大きい

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

〇〇pxより小さい

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

おすすめ(2021年1月最新)

おすすめ1

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

CSS
@media not all and (min-width: 960px) {
  /* タブレット用のスタイル */
}
CSS
@media not all and (min-width: 560px) {
  /* スマホ用のスタイル */
}

おすすめ2

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

CSS
@media not all and (min-width: 1024px) {
  /* タブレット横用のスタイル */
}
CSS
@media not all and (min-width: 768px) {
  /* スマホ、タブレット縦用のスタイル */
}