ブレークポイント

ブレークポイントとは

ブレークポイントとは、echo.cssでは、ブレークポイントを定義するクラス名には、画面サイズや解像度規格名ではなく、代替名を使用しています。
xxs, xs, sm, md, lg, xl, xxl の7段階があります。

スタイルガイドでは (breakpoint) と記載しています。

ブレークポイントと画面サイズ

(breakpoint) と画面サイズの対応は以下のとおりです。

(breakpoint)画面サイズ想定される端末
xxs20rem (320px)iPhone SE、拡大モード
xs22.5rem (360px)一般的なスマートフォン
sm26.75rem (428px)iPhone Plusシリーズ, Pixel XLシリーズ
md48rem (768px)一般的なタブレット(portrait)
lg62.5rem (1000px)一般的なタブレット(landscape)
xl80rem (1280px)小さくしたウィンドウでの閲覧、拡大モード
xxl90rem (1440px)一般的なデスクトップ