[CSS] 有名フレームワークのブレイクポイント一覧

1. Bootstrap4

Twitterの提供するCSSフレームワーク。

• Small devices: 576px以上の画面サイズ
• Medium devices: 768px以上の画面サイズ
• Large devices: 992px以上の画面サイズ
• Extra large: 1200px以上の画面サイズ

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

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

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

• Responsive breakpoints · Bootstrap

2. Materialize CSS

Googleが提唱しているデザインのガイドラインであるマテリアルデザインに
準拠することを目的に作られたCSSフレームワークです。

• s (Mobile Devices) <= 600px
• m (Tablet Devices) > 600px
• l (Desktop Devices) > 992px
• xl (Large Desktop Devices) > 1200px

• Grid – Materialize

3. Pure CSS

Yahooの提供している非常に軽量でコンパクトでシンプルなCSSフレームワークです。

• sm ≥ 568px
• md ≥ 768px
• lg ≥ 1024px
• xl ≥ 1280px

/* sm ≥ 568px */
@media screen and (min-width: 35.5em)

/* md ≥ 768px */
@media screen and (min-width: 48em)

/* lg ≥ 1024px */
@media screen and (min-width: 64em)

/* xl ≥ 1280px */
@media screen and (min-width: 80em)

• Grids – Pure

4. Foundation

• Small: 任意の画面サイズ
• Medium: 640px以上の画面サイズ
• Large: 1024px以上の画面サイズ

/* 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) {}

• Media Queries | Foundation for Sites 6 Docs

min-width（最小幅）とmax-width（最大幅）の違い

CSSメディアクエリを使用した際の使い分けです。

• min-width :640px 最小幅の設定…ブラウザの幅が640px以上の場合に適用
• max-width :639px 最大幅の設定…ブラウザの幅が639px以下の場合に適用