画面幅
画面幅の切り替え点は 6 段。いずれも下限値(その幅以上で適用)として扱う。
一覧
| トークン | 下限 | 主な対象 | 備考 |
|---|---|---|---|
xs | 480px | 大きめのスマートフォン | Rimo 独自に追加 |
sm | 640px | 横向きのスマートフォン | |
md | 768px | タブレット | |
lg | 1024px | 小さめのノート PC | |
xl | 1280px | デスクトップ | |
2xl | 1536px | 大画面 |
使い方の規則
- 狭い方から書く。 まずモバイルの表示を作り、必要になったところだけ広い側を上書きする
- 本文が読める幅の上限を超えて 1 行を伸ばさない
- 画面幅ではなくコンテンツの役割でレイアウトを分ける(本文 / 補助パネル / ナビゲーション)
グリッドは定義しない
12 カラムのような固定カラム数のグリッドは定義していない。Rimo の主要画面は文字起こしエディタや議事録のような縦に長い読み書きの画面で、カラム分割よりも「読みやすい 1 本の幅」と「その脇に付くパネル」の組み合わせが中心になるため。