Follow Us:

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

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


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

・横幅1281以上 デスクトップ
・1025以上1280以下 ノートパソコン、デスクトップ
・768以上1024以下 タブレット、IPADポートレイト
・768以上1024以下 タブレット、IPADランドスケープ
・481以上767以下 小さめのタブレット、スマートフォン・モバイル
・0から480 スマートフォン(モバイル ランドスケープ)

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

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

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

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

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

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

 ワードプレスについて学んでプロに好きなだけ質問できるオンラインサロンはこちら

関連タグ:

Wordpress ワードプレス ドクターBlog タグ一覧

© 2015-16. «WP Doctorワードプレスドクター». All right reserved.