ワードプレスのStyle.cssに使えるデバイス毎のメディアクエリ一覧

メディアクエリとは、サイトが表示されている画面の横幅に応じて別のスタイル(CSS)を適応する仕組みです。ワードプレスではテーマのStyle.cssに記載して利用可能です。
今回は様々なデバイスに対応できる便利なメディアクエリ一覧をご紹介します。

ワードプレスのStyle.cssでも利用できるメディアクエリ一覧　詳細分類版

・横幅１２８１以上　デスクトップ
・１０２５以上１２８０以下　ノートパソコン、デスクトップ
・７６８以上１０２４以下　タブレット、IPADポートレイト
・７６８以上１０２４以下　タブレット、IPADランドスケープ
・４８１以上７６７以下　小さめのタブレット、スマートフォン・モバイル
・0から４８０　スマートフォン(モバイル　ランドスケープ)

※/* */で囲まれている部分はコメントですので削除されてもかまいません。

/* 横幅１２８１以上　デスクトップ */
@media (min-width: 1281px) {
  /* CSS を記載*/
}
/* １０２５以上１２８０以下　ノートパソコン、デスクトップ */
@media (min-width: 1025px) and (max-width: 1280px) { 
  /* CSS を記載*/
}
/* ７６８以上１０２４以下　タブレット、IPADポートレイト*/
@media (min-width: 768px) and (max-width: 1024px) {
  /* CSS を記載*/
}
/* ７６８以上１０２４以下　タブレット、IPADランドスケープ*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  /* CSS を記載*/
}
/* 　４８１以上７６７以下　小さめのタブレット、スマートフォン・モバイル*/
@media (min-width: 481px) and (max-width: 767px) {
  /* CSS を記載*/
}
/* 0から４８０　スマートフォン(モバイル　ランドスケープ)*/
@media (min-width: 0px) and (max-width: 480px) {
  /* CSS を記載*/
}

ワードプレスのStyle.cssでも利用できるメディアクエリ一覧　簡略化版

多くの場合、こちらでも問題ないかと存じます。
・１０２５以上　ノートパソコン、デスクトップ
・４８１以上１０２４以下　タブレット
・０から４８０　スマートフォン

/* １０２５以上　ノートパソコン、デスクトップ */
@media (min-width: 1025px) { 
  /* CSS を記載*/
}
/* ４８１以上１０２４以下　タブレット*/
@media (min-width: 481px) and (max-width: 1024px) {
  /* CSS を記載*/
}
/* ０から４８０　スマートフォン)*/
@media (min-width: 0px) and (max-width: 480px) {
  /* CSS を記載*/
}

WordPressワードプレスのデザインのカスタマイズ修正・レイアウトずれ等のご依頼・ご相談はWPドクターまでお気軽にお送りください