どうしてもElementorと比較してしまいますが、Elementorではデスクトップとスマホだけのブレークポイントの設定はありませんが、Bricksではその設定があります。
ブレークポイントを少なくする理由
ウェブサイトのレスポンシブ設計では、一般的に「スマホ・タブレット・PC」など複数のブレークポイントを設けます。
しかし、プロジェクトによってはデスクトップとスマホの2つだけに絞ったほうが、管理がシンプルで崩れも起きにくい場合があります。
また、ウェブサイト構築の時短にもつながるので、予算が少ない場合など効果的と言えます。
デスクトップとスマホのみの設定方法
ブレークポイントを最小限にしたい場合のポイントは、タブレットをPC扱いかスマホ扱いか明確にすること。
多くのスマホは375〜430px程度ですが、横幅が広い Pixel / Galaxy / iPad mini などは 760px〜1080px あります。そのため、スマホの境界は 1024px に設定するのが現代の最適解 となります。
Bricksでは下図の設定になります。
メリット
- 管理が圧倒的にシンプル
- スタイルの競合が起きにくい
- 修正の影響範囲がわかりやすい
デメリット
- タブレット特化デザインは作れない
しかし、タブレットユーザーはPCと同じ内容を閲覧できれば問題ないケースがほとんどです。
まとめ
- ブレークポイントは「少ないほど崩れにくい」
- Desktop（Base）＋1つのMobileが最もシンプル
- スマホ判定は max-width: 1024px が汎用性が高い
