Lightning Design SystemはSalesforceのCSS Frameworkです。自分でCSSを用意しなくてもいろいろなCSSコンポーネントを利用することができるので便利です。
Salesforce内の開発以外でもHerokuなどスタンドアローンアプリの開発でも利用できます。例えばこんな感じの画面が作れます。
画面サイズに合わせてinputTextの幅を調整してくれたり、リストを横表示から縦表示に切り替えてくれたりとすごく便利です。
幅調整などはLightning Design Systemの方で自動対応してくれますが、これだけではモバイル対応としては不十分です。スマートフォンのブラウザからアクセスするとこのように小さな文字サイズで表示されてしまいます。
忘れてはいけないのがモバイル用の設定でお馴染みのmetaタグの"viewport"です。
これでスマートフォンのブラウザからアクセスしたときでも文字が見やすい大きさに拡大されて表示されます。
ということでLightning Design Systemで開発するときでもモバイルブラウザからアクセスして使用する画面の場合は、metaタグの"viewport"はきちんと宣言した方が良さそうです。
