レイアウト

ブレークポイント

アプリケーションを複数の端末間で展開する際は適宜ブレークポイントを設定してください。各画面サイズごとに定められた固定/可変エリアを採用することで、端末ごとに最適なレイアウト表示が可能となります。

具体的な数値に関してはメインとなる端末での見栄えを優先し、開発時の端末普及状況を考慮しながら実装担当者と相談して決めてください。図はその一例です。

黄伝では、上記のルールに則りモバイル・タブレット・PCとの表示ルールを変更しています。
構造は以下を参照してください。

スマートフォン
- - paddingを固定幅とし、両端の余白を残しつつコンテンツ部分が画面に合わせ可変
タブレット
- - コンテンツ、paddingを合わせたコンテナまでを固定幅としスマホに近い見え方を維持しつつ、margin部分を追加して画面サイズに合わせ可変
PC
- - paddingで十分な余白を確保し、コンテンツ部分を画面に合わせて可変