Point:Studioのレスポンシブデザイン
Studioでは、1つのページデザインを基準に、各種画面幅(ブレイクポイント)ごとにスタイルを調整してレスポンシブデザインを実現します。
ボックスやテキストのレイアウト・外観・ポジションなどはブレイクポイントごとに変更できますが、画像やテキスト自体の内容、グルーピング構造は共通です。
レスポンシブデザイン全体の考え方や関連機能については、次の記事も参考にしてください。
PCサイズでデフォルトのデザインを作成したあと、Baseボックスの幅を調整しながら、さまざまな端末での見え方を確認します。 スクリーン幅は、次の2通りの方法で変更できます。
方法 1:スクリーンの端をドラッグして変更する
デザインエディタで対象ページを開きます。
スクリーン右端または左端にマウスカーソルを合わせます。
カーソルがドラッグ可能な状態に変わったら、そのまま左右にドラッグしてスクリーン幅を変更します。
方法 2:レスポンシブバーでスクリーンサイズを切り替える
選択したサイズに応じてスクリーン幅が切り替わります。
responsive SP mobile tablet small


