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和flex，可以在移动设备中获得所需的结果，但正如您所知，在桌面上，而不是占比为2：1的占一半。

另请参阅附图。

预期

a busy cat http://dev.sprintu.com/imgHelp/final1.png

如何

a busy cat http://dev.sprintu.com/imgHelp/final2.png

因此，我正在寻找一种方法来更改较小屏幕的灵活值（适用于应用layout-sm时 - 将flex=66更改为flex=100）。

Answer 1

查看＆＃34; Responsive Flex＆amp;偏移属性＆＃34;部分：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大于小（移动）时，div只会使用66宽度

角度材料设计 - 使用屏幕尺寸

1 个答案: