私はAngularJS初心者なので、どうかご容赦ください。私は角度付きマテリアルデザインレスポンシブ グリッドを効率的に実行する方法を見つけるのが困難です。
以下のコード内の私のコメントを参照してください。
<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 に変更すると"flex=66"、"flex=32"モバイルflexデバイスでは望ましい結果が得られます。ただし、ご存知のとおり、デスクトップでは 2:1 の比率ではなく、半分ずつを占めることになります。
添付画像もご覧ください。
期待される
（ソース：sprintu.com）
それはどうなのか
（ソース：sprintu.com）
そこで、小さい画面用に flex 値を変更する方法を探しています (layout-smが適用されている場合は に変更しますflex=66) flex=100。
ベストアンサー1
ここで「レスポンシブ フレックス & オフセット属性」セクションを確認してください:https://material.angularjs.org/#/layout/options
基本的に、次のオプションを使用できます。
- flex - すべてに flex を設定します。
- flex-sm - 幅が 600 ピクセル未満のデバイスで flex を設定します。
- flex-gt-sm - 幅が 600 ピクセルを超えるデバイスで flex を設定します。
- flex-md - 幅 600 ピクセルから 960 ピクセルまでのデバイスで flex を設定します。
- flex-gt-md - 幅が 960 ピクセルを超えるデバイスで flex を設定します。
- flex-lg - 960 ピクセルから 1200 ピクセルの間のデバイスでフレックスを設定します。
- flex-gt-lg - 幅が 1200 ピクセルを超えるデバイスで flex を設定します。
だから、次のことを変更してください:
<div layout="column" flex="66">
に
<div layout="column" flex-gt-sm="66">
そして、そのdivは小さい（モバイル）より大きい場合にのみ幅66を使用します。