Angular Material Design - 随屏幕尺寸改变 flex 值 [英] Angular Material Design - Change flex value with screen size

问题描述

我是 AngularJS 的新手，所以请耐心等待.我正在使用
_{(来源:
(来源:sprintu.com)}

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

解决方案

在此处查看响应式 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 - 在 960 像素和 1200 像素之间的设备上设置 flex.
• flex-gt-lg - 在宽度大于 1200 像素的设备上设置 flex.

所以改变你的:

到

当大于小(移动)时，那个 div 只会使用 66 宽度

I'm new to AngularJS so please bear with me. I'm using Angular Material Design and I have difficulties in identifying a way to efficiently do responsive grids.

Please see my comments in the code below:

    <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>

But changing the above flex values from "flex=66" and "flex=32" to simply flex and flex, gives me desired result in mobile devices, however as you would know, in desktop, instead of the 2:1 ratio its occupying half and half.

Please also see attached images.

Expected

_{(source: sprintu.com)}

How it is

_{(source: sprintu.com)}

So I'm looking for a way to change the flex value for smaller screens (for when layout-sm is applied - change flex=66 to flex=100).

解决方案

Check out the "Responsive Flex & Offset Attributes" section here: https://material.angularjs.org/#/layout/options

Basically, you can use these options:

• flex - Sets flex on all.
• flex-sm - Sets flex on devices less than 600px wide.
• flex-gt-sm - Sets flex on devices greater than 600px wide.
• flex-md - Sets flex on devices between 600px and 960px wide.
• flex-gt-md - Sets flex on devices greater than 960px wide.
• flex-lg - Sets flex on devices between 960px and 1200px.
• flex-gt-lg - Sets flex on devices greater than 1200px wide.

So change your:

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

to

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

And that div will only use the 66 width when greater than small (mobile)

这篇关于Angular Material Design - 随屏幕尺寸改变 flex 值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！