ブレークポイントとは
ブレークポイントとは、echo.cssでは、ブレークポイントを定義するクラス名には、画面サイズや解像度規格名ではなく、代替名を使用しています。
xxs, xs, sm, md, lg, xl, xxl
の7段階があります。
スタイルガイドでは (breakpoint) と記載しています。
ブレークポイントと画面サイズ
(breakpoint) と画面サイズの対応は以下のとおりです。
(breakpoint) | 画面サイズ | 想定される端末 |
---|---|---|
xxs | 20rem (320px) | iPhone SE、拡大モード |
xs | 22.5rem (360px) | 一般的なスマートフォン |
sm | 26.75rem (428px) | iPhone Plusシリーズ, Pixel XLシリーズ |
md | 48rem (768px) | 一般的なタブレット(portrait) |
lg | 62.5rem (1000px) | 一般的なタブレット(landscape) |
xl | 80rem (1280px) | 小さくしたウィンドウでの閲覧、拡大モード |
xxl | 90rem (1440px) | 一般的なデスクトップ |