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

Posted 2023-02-22

【中文标题】Angular Material Design - 随屏幕尺寸改变 flex 值

【英文标题】：Angular Material Design - Change flex value with screen size

【发布时间】：2015-07-20 00:32:37

【问题描述】：

我是 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）。

【问题讨论】：

与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?.

感谢分享！将遵循这些。

flex="32" 将无效。材料只允许 5 和 33 或 66 的倍数

【参考方案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 宽度

【讨论】：

优秀的凯尔！做到了。我很愚蠢地错过了这一点。欣赏它:)

酷，很高兴我能帮上忙。文档中有很多很容易错过的小东西。他们在构建布局方面做得非常出色，您几乎可以猜到类似的功能并假设它们会起作用

好吧，我一定会去看看 ;)

出于某种原因，这些是removed from the docs，但它们仍然有效。

请注意，flex-gt-lg 现在的宽度 >= 1920 像素，而不是宽度 >= 1200 像素。见here。