Angular Material Design - 随屏幕尺寸改变 flex 值

Question

我是 AngularJS 的新手，所以请多多包涵。我正在使用Angular Material Design，但我很难找到一种有效地执行响应式网格的方法。

请在下面的代码中查看我的 cmets：

    <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占据一半一半。

另请参阅附件图片。

预期

_{（来源：sprintu.com）}

怎么样

_{（来源：sprintu.com）}

所以我正在寻找一种方法来更改较小屏幕的 flex 值（当应用 layout-sm 时 - 将 flex=66 更改为 flex=100）。

Answer 1

在此处查看“响应式 Flex 和偏移属性”部分：https://material.angularjs.org/#/layout/options

基本上，您可以使用以下选项：

• flex - 全部设置 flex。
• flex-sm - 在宽度小于 600 像素的设备上设置 flex。
• flex-gt-sm - 在宽度大于 600 像素的设备上设置 flex。
• flex-md - 在 600px 到 960px 宽的设备上设置 flex。
• flex-gt-md - 在宽度大于 960 像素的设备上设置 flex。
• flex-lg - 在 960px 和 1200px 之间的设备上设置 flex。
• flex-gt-lg - 在宽度大于 1200 像素的设备上设置 flex。

所以改变你的：

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

到

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

并且该 div 将仅在大于 small（移动）时使用 66 宽度