Angular Material 设计 - 随屏幕大小更改弹性值

Question

我是 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=66" 和 "flex=32" 更改为简单的 flex 和弹性，在移动设备上得到了我想要的结果，但是正如你所知，在桌面上，而不是 2:1 比例它占据了一半。

另请参阅附件图片。

预计

_{（来源：sprintu.com）}

怎么样

_{（来源：sprintu.com）}

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

Answer 1

查看此处的 "Responsive Flex & Offset Attributes" 部分：https://material.angularjs.org/#/layout/options

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

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

所以改变你的：

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

到

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

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

Angular Material 设计 - 随屏幕大小更改弹性值

Angular Material Design - Change flex value with screen size

angularjs

material-design

angular-material