レスポンシブ対応時に切り替わるブレークポイントの追加や値の編集が可能です。
デザインが可変するポイントをデバイスごとに設定すると、各デバイスの画面サイズに適したWebサイト表示ができます。
1.ブレークポイントを追加・削除する方法
smartLPではデスクトップを起点として、各デバイスの適切なブレークポイントを設定していきます。
初期状態ではブレークポイントは「Desktop：1280px」「Tablet: 768px」「Mobile: 480px」の3つに設定されています。
これに加えて「Laptop: 1080px」「Small: 320px」のブレークポイントを追加できます。
※設定したブレークポイントはページごとに編集可能です。
ブレークポイントの追加や削除はチェクボックスより選択できます。
表示したいブレークポイントを選択して適用するを押下すると、選択したブレークポイントのみが表示されます。
これにより、追加したブレークポイントに対して個別のスタイル設定が可能になります。
また、運営するWebサイトのターゲット層に合った端末表示をより細かく最適化できます。
デバイスごとの編集方法の詳細に関してはこちら
同様に、非表示にしたい場合はチェックボックスの選択を外してください。
非表示にすると、公開しているページでもブレークポイントが適用されません。
※デスクトップの非表示は不可。
2.ブレークポイントの値を変更する
ブレークポイントの値を変更するには、表示されているブレークポイントに任意の数値を入力して適用するを押下します。
変更したブレークポイントのアイコンを押下すると、エディター上部に設置した値と各ブレイクポイントを示す縦ラインの変更が反映されます。
また、エディターの横幅をポインターで左右に動かして指定したブレークポイントの値の範囲内になると、右上のアイコンと各ブレイクポイントを示す縦ラインに色が反映されます。