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

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

Clock Icon2014.06.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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以上の場合

RWD_LG

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

RWD_MD

ブラウザ幅 768未満の場合

RWD_SM

最後に

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

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

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.