angularjs - Angular Material Design - 根据屏幕尺寸更改弹性值

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 值从 "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 - 在 600 像素到 960 像素宽的设备上设置 Flex。
• flex-gt-md - 在宽度大于 960 像素的设备上设置 Flex。
• flex-lg - 将设备上的 Flex 设置为 960 像素到 1200 像素之间。
• flex-gt-lg - 在宽度大于 1200 像素的设备上设置 Flex。

所以改变你的:

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

至

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

并且该 div 仅在大于小(移动设备)时才使用 66 宽度