タブレット専用範囲クエリ (768px-1023px)

範囲クエリでタブレットのみをターゲット

タブレットにはスマホとデスクトップの両方とは異なるスタイルが必要な場合があります。min-widthとmax-widthをand演算子で組み合わせて範囲を作成できます。

クエリ

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* タブレット専用スタイル */
}

モダンCSSの範囲構文

CSS Media Queries Level 4仕様では、よりクリーンな範囲構文が導入されています：

@media (768px <= width < 1024px) {
  /* タブレット専用 */
}