画面幅

Draft

画面幅の切り替え点は 6 段。いずれも下限値(その幅以上で適用)として扱う。

一覧

トークン下限主な対象備考
xs480px大きめのスマートフォンRimo 独自に追加
sm640px横向きのスマートフォン
md768pxタブレット
lg1024px小さめのノート PC
xl1280pxデスクトップ
2xl1536px大画面

使い方の規則

  • 狭い方から書く。 まずモバイルの表示を作り、必要になったところだけ広い側を上書きする
  • 本文が読める幅の上限を超えて 1 行を伸ばさない
  • 画面幅ではなくコンテンツの役割でレイアウトを分ける(本文 / 補助パネル / ナビゲーション)

グリッドは定義しない

12 カラムのような固定カラム数のグリッドは定義していない。Rimo の主要画面は文字起こしエディタや議事録のような縦に長い読み書きの画面で、カラム分割よりも「読みやすい 1 本の幅」と「その脇に付くパネル」の組み合わせが中心になるため。

Copied!