web-dev-qa-db-ja.com

Angular Material Design-画面サイズに応じてフレックス値を変更

私はAngularJSが初めてなので、ご容赦ください。 Angular Material Design を使用していますが、レスポンシブグリッドを効率的に行う方法を特定するのが困難です。

以下のコードの私のコメントをご覧ください：

    <div layout="row">
<div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin> <!-- USING ROW FOR DESKTOP AND COLUMN FOR MOBILE DEVICES -->

    <div layout="column" flex="66"> <!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) -->


        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>1</div>
            <div class="ptn-info-grid-item" flex>2</div>
        </div>

        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>3</div>
            <div class="ptn-info-grid-item" flex>4</div>
        </div>

    </div>

    <div layout="column" flex="32"> <!-- I want this div occupy 1/3 of screen in Desktop but change to 100(which actually happens) in mobile devices. Im not using 33 because while using margin for child elements this div goes out of the parent div a little. -->
        <div class="ptn-info-grid-item" flex style="margin-left: 0px;">Right Long
        </div>
    </div>

</div>
<div layout="row" flex="25" id="customer-phone-img"></div>

しかし、上記のflexの値を"flex=66"と"flex=32"から単にflexとflexに変更すると、モバイルデバイスでは望ましい結果が得られますが、ご存知のように、デスクトップでは2比率は1：半分を占めます。

添付画像もご覧ください。

期待される

忙しい猫http://dev.sprintu.com/imgHelp/final1.png

それがどうであるか

忙しい猫http://dev.sprintu.com/imgHelp/final2.png

そこで、小さな画面のフレックス値を変更する方法を探しています（layout-smが適用される場合-flex=66をflex=100に変更します）。

angularjsmaterial-designangular-material
34
user1220169

こちらの「レスポンシブフレックスとオフセット属性」セクションをご覧ください： https://material.angularjs.org/#/layout/options

基本的に、次のオプションを使用できます。

  • flex-すべてにフレックスを設定します。
  • flex-sm-600px幅未満のデバイスにflexを設定します。
  • flex-gt-sm-幅が600ピクセルを超えるデバイスにフレックスを設定します。
  • flex-md-デバイスのフレックスを幅600〜960ピクセルに設定します。
  • flex-gt-md-960px幅を超えるデバイスにflexを設定します。
  • flex-lg-960px〜1200pxのデバイスのフレックスを設定します。
  • flex-gt-lg-1200px幅を超えるデバイスのフレックスを設定します。

あなたの変更：

<div layout="column" flex="66">

に

<div layout="column" flex-gt-sm="66">

そして、そのdivは、小さい（モバイル）より大きい場合にのみ66幅を使用します

55
Kyle Ledbetter