web-dev-qa-db-fra.com

Angular Material Design - Change flex value with screen size

Je suis nouveau sur AngularJS, alors soyez indulgent avec moi. J'utilise Angular Material Design et j'ai des difficultés à identifier un moyen de faire efficacement des grilles réactives.

Veuillez voir mes commentaires dans le code ci-dessous:

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

Mais en changeant les valeurs flex ci-dessus de "flex=66" et "flex=32" à simplement flex et flex, me donne le résultat souhaité sur les appareils mobiles, cependant comme vous le savez, dans le bureau, au lieu du rapport 2: 1, il occupe la moitié et la moitié.

Veuillez également voir les images ci-jointes.

Attendu

n chat occupé http://dev.sprintu.com/imgHelp/final1.png

Comment c'est

n chat occupé http://dev.sprintu.com/imgHelp/final2.png

Je cherche donc un moyen de modifier la valeur de flex pour les petits écrans (pour quand layout-sm est appliqué - modifiez flex=66 à flex=100).

angularjsmaterial-designangular-material
34
user1220169

Consultez la section "Responsive Flex & Offset Attributes" ici: https://material.angularjs.org/#/layout/options

Fondamentalement, vous pouvez utiliser ces options:

  • flex - Définit flex sur tout.
  • flex-sm - Définit le flex sur les appareils de moins de 600 pixels de large.
  • flex-gt-sm - Définit la flexion sur les appareils d'une largeur supérieure à 600 pixels.
  • flex-md - Définit la flexion sur les appareils de 600 à 960 pixels de large.
  • flex-gt-md - Définit la flexion sur les appareils d'une largeur supérieure à 960 pixels.
  • flex-lg - Définit la flexion sur les appareils entre 960px et 1200px.
  • flex-gt-lg - Définit flex sur les appareils de plus de 1 200 pixels de large.

Alors changez votre:

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

à

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

Et cette div n'utilisera la largeur 66 que lorsqu'elle est plus grande que petite (mobile)

55
Kyle Ledbetter