Written by Kasumi

【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をあてる事ができタブレットのみにブレイクポイントをあてる事が可能になります。

以上で実装完了です。

まとめ

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

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

目次

関連記事

HTMLCSS プログラミング

【簡単】iphone(ios)でinputタグをタップしたらズームされるのを回避する方法

2022.02.12
8774
HTMLCSS

【簡単】radioボタン(ラジオボタン)のデザインをカスタマイズする方法【CSS】

更新日:2022.11.24
8558
HTMLCSS プログラミング

CSSで背景画像を右からを基準にpx指定する方法

2020.07.13
6003
HTMLCSS プログラミング

form(フォーム)タグでエンターキー送信を無効にする方法

2021.12.21
9569