각도 재료 설계 - 화면 크기에 따라 플렉스 값 변경

각도 재료 설계 - 화면 크기에 따라 플렉스 값 변경

Angular는 처음입니다.JS니까 조금만 참아주세요.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모바일 디바이스에서 원하는 결과를 얻을 수 있습니다.다만 데스크톱에서는 2:1의 비율로 절반과 절반을 차지하지 않습니다.

첨부한 이미지도 참조해 주세요.

기대됩니다

_{(출처 : sprintu.com )}

어떤 상태입니까?

_{(출처 : sprintu.com )}

그래서 작은 화면의 플렉스 값을 변경할 수 있는 방법을 찾고 있습니다.layout-sm적용됨 - 변경flex=66로.flex=100).

다음 URL의 "Responsive Flex & Offset Attributes" 섹션을 참조하십시오.https://material.angularjs.org/ # / filters / filters

기본적으로 다음 옵션을 사용할 수 있습니다.

• flex - flex on all을 클릭합니다.
• flex-sm - 600px 미만의 폭의 디바이스에 플렉스를 설정합니다.
• 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는 소형(모바일)보다 큰 경우에만 66폭을 사용합니다.

언급URL : https://stackoverflow.com/questions/30134892/angular-material-design-change-flex-value-with-screen-size