AngularJS を用いたアプリをレスポンシブ化してみた。

はじめに

AngularJS UI BootstrapにはBootstrapが用いられているため、
下記のGrid systemをそのまま使う事が可能です。

CSS · Bootstrap

実装例

サンプルとしては、弊社ブログのFeedを用いました。

radiant-meadow-2447.herokuapp.com/#/rwdfix

AngularJS Generatorで雛形を作成する際に、
AngularJS UI Bootstrapを用いる事で既にCSSも取り込まれます。

表示部分に関する実装は以下になります。

<div class="container-fluid">
    <div class="row">
        <div ng-repeat="entry in feed.entries" ng-if="$index % 3 === 0">
            <section class="col-xs-12 col-sm-6 col-md-4" style="height:300px" ng-if="$index < feed.entries.length">
                <h2>{{$index}}-{{feed.entries[$index].title}}</h2/>
                <p>{{feed.entries[$index].content}}</p>
            </section>
            <section class="col-xs-12 col-sm-6 col-md-4" style="height:300px" ng-if="$index+1 < feed.entries.length">
                <h2 id="toc-index-1-feed-entriesindex-1-title">{{$index + 1}}-{{feed.entries[$index + 1].title}}</h2>
                <p>{{feed.entries[$index + 1].content}}</p>
            </section>
            <section class="col-xs-12 col-sm-6 col-md-4" style="height:300px" ng-if="$index+2 < feed.entries.length">
                <h2 id="toc-index-2-feed-entriesindex-2-title">{{$index + 2}}-{{feed.entries[$index + 2].title}}</h2>
                <p>{{feed.entries[$index + 2].content}}</p>
            </section>
        </div>
    </div>
</div>

ブラウザのサイズを変更する事で、一行で表示される記事の行が変わります。

ブラウザ幅 992px以上の場合

ブラウザ幅 768px以上の場合

ブラウザ幅　768未満の場合

最後に

Bootstrapに作法に則る事で、容易に表示されるカラム数を可変にする事ができました。
ただ、Bootstrap側ではFontsサイズの制御が無いのか、
タイトルが長くなったりしてしまうと本文側とかぶると言った事がありました

実際に業務として使うとなると、
CSS3 Media Queriesを用いてフォントサイズ指定するもしくは、
コンテンツの長さを調整すると言ったレスポンシブ対応の作業が発生するものと思われます。