角材料设计 - 更改与屏幕尺寸的柔性价值 [英] Angular Material Design - Change flex value with screen size

问题描述

新AngularJS所以请大家多多包涵。 IM采用了棱角分明的设计材料（ https://material.angularjs.org ），我有识别的方式来有效地完成电网响应困难。

new to AngularJS so please bear with me. Im using Angular Material Design (https://material.angularjs.org) and I have difficulties in identifying a way to efficiently do responsive grids.

请看到我的评论如下code：

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>

但是，从挠曲= 66和挠曲= 32改变上述挠曲值，以简单地挠曲和弯曲，使我期望的结果在移动设备，然而，你会知道，在桌面上，而不是2:1其比例占据一半对一半。

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.

另请参见附件图片。

！[预计] [1]

Please also see attached images. ![Expected][1]

！[它是如何] [2]

![How it is][2]

所以我在寻找一种方式来改变小屏幕的弯曲值。（当应用布局-SM的 - 改变柔性= 66弯曲= 100）

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

推荐答案

查看响应的Flex和放大器;偏移属性一节在这里：<一href=\"https://material.angularjs.org/#/layout/options\">https://material.angularjs.org/#/layout/options

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

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

Basically, you can use these options:

• 弯曲 - 设置弯曲所有


• 柔性SM - 设置弯曲的设备上小于600px的宽。


• 柔性GT-SM - 设置弯曲的设备比600px的宽更大。


• 柔性-MD - 设置在弯曲和600px的宽960像素之间的设备
。

• 柔性GT-MD - 设置弯曲的设备超过960像素宽更大
。

• 柔性LG - 设置在弯曲960像素和1200像素之间的设备
。

• 柔性GT-LG - 设置弯曲的设备超过1200像素宽更大
。

因此​​，改变你的：

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

到

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

和该分区将只使用66时宽度比小（手机）大于

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

这篇关于角材料设计 - 更改与屏幕尺寸的柔性价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！