[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめ

サイト構築 -CSS

Post on:2016年9月12日

各デバイスのブレイクポイントに合わせたメディアクエリの書き方

スマホ、タブレット、ラップトップ、デスクトップごとのブレイクポイント、そしてiPhone, iPad, Nexusなど各デバイス用のブレイクポイントに合わせたメディアクエリの書き方がまとめられています。

Simple CSS Media Queries

デバイスの種類や各デバイスをクリックすると、コードが表示されます。

複数のブレイクポイントを使ったメディアクエリの書き方

スマホに320px、タブレットに768px、デスクトップに1200px、という感じで自分で数値を設定し、複数のブレイクポイントを使ったメディアクエリを生成します。

Responsive breakpoints

ブラウザ上で見ながら設定できるので、分かりやすいですね。

人気のフレームワークのブレイクポイントの設定

ブレイクポイントはいったいどれだけの値で、いくつ設定すればいいのだろう、という時には、人気の高いフレームワークの設定が参考になります。

Media Queries -Bootstrap

Bootstrapではデフォルトをスマホにして、3つのブレイクポイントを設定しています。モバイルファーストですね。

Extra small: 768px未満: スマホ（デフォルト）; スマホは、Media Queries無しで記述。
Small: 768px以上: タブレット
Medium: 992px以上: デスクトップ
Large: 1200px以上: ワイドスクリーン

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

/* Extra small devices (phones, less than 768px) */

/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }

Responsiveness -Bulma

2016年にリリースされた人気のフレームワーク「Bulma」もモバイルファーストです。4つのブレイクポイントが用意されています。

Mobile: 最大768px: スマホ
Tablet: 769px以上: タブレット
Desktop: 980px以上: デスクトップ
Widescreen: 1180px以上: ワイドスクリーン

Mixinsでは7つ用意されており、上記の他に以下の3つが加わります。

tablet-only: 769px以上 979px以下: タブレットのみ
touch: 979px以下: タッチデバイス
desktop-only: 980px以上 1179px以下: デスクトップのみ

Media Queries -Foundation

Foundationではデフォルトで3つのclassが利用され、5つのブレイクポイントがem単位で用意されています。

Small: デフォルト
Medium: 640px以上
Large: 1024以上

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}