【CSSメディアクエリ】タブレットのみにブレイクポイントをあてる方法

CSSメディアクエリを使ってブレイクポイントをタブレット（縦）のみにしたい。

本記事ではこのような悩みを解決します。

スマホのみの場合

/* スマホのみ */
@media screen and (max-width: 767px) {
  p {
    font-size: 12px;
  }
}

通常スマホのみにブレイクポイントをあてる場合はメディア特性にmax-widthを入れて値を767px程（スマホの最大主流デバイス幅）にします。

上記のようにすることで767px以下のデバイスのみにCSSをあてる事が可能です。

/* タブレットのみ */
@media screen and (min-width:767px) and ( max-width: 1280px) {
  p {
　　font-size: 12px;   
  }
}

メディアクエリを使ってタブレットのみにブレイクポイントをあてるコード例です。

andを使ってメディア特性を二つ指定します。

(min-width:767px) and ( max-width: 1280px)とメディア特性を指定する事で、767px以上1280px（タブレットの最大主流デバイス幅）以下のデバイスにCSSをあてる事ができタブレットのみにブレイクポイントをあてる事が可能になります。

以上で実装完了です。

メディアクエリでタブレットのみにブレイクポイントをあてる方法について紹介しました。

以上で解説を終わります。