Open Web App に最適な構造を作るために役立つ一連の記事です。
- レスポンシブデザインのビルディングブロック
- モダンなアプリのレイアウトに不可欠なトピックであるレスポンシブデザインの基礎について学びましょう。
- メディアクエリ
-
レスポンシブなアプリ設計において最も重要な技術のひとつがメディアクエリです。メディアクエリは、宣言型 CSS ルールか JavaScript リスナーを使って、画面サイズ、解像度、端末の向き、その他様々な環境変数にアプリを反応させることができるものです。メディアクエリの使用 と
MediaQueryListも参照してください。 - モバイルファースト
- レスポンシブなアプリケーションのレイアウトを行う際、モバイル向けのレイアウトを先に行い、その上で大きな画面向けのレイアウトを追加するという作業の順序が理にかなっていることがしばしばあります。
- 可変ボックス
- CSS 可変ボックスを使えば、画面のサイズや向きに応じて各要素の位置やサイズを自動的に調整するよう、アプリのユーザインタフェースを設定することが可能です。
注: Firefox OS アプリを開発している場合、複数行の可変ボックスは Firefox OS 1.3 以上での対応となっていることに注意してください。古いバージョン向けには、シンプルなレイアウトを採用するか、フォールバックを提供する必要があるかもしれません。