Angular Material Design - Ändern Sie Flex-Wert mit Bildschirmgröße

Question

Ich bin neu bei AngularJS also bitte mit mir. Ich benutze Angular Material Design und ich habe Schwierigkeiten, einen Weg zu finden, effizient reagierende Netze zu machen.

Bitte beachten Sie meine Kommentare im folgenden Code:

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

Aber die oben genannten Flex-Werte von "flex=66" verändern und "flex=32" einfach flex und Flex, gibt mir gewünschtes Ergebnis in mobilen Geräten, aber als Sie würden wissen, im Desktop, anstatt des Verhältnisses 2: 1 seine Hälfte und Hälfte einnimmt.

Bitte beachten Sie auch die beigefügten Bilder.

Erwartet

a busy cat http://dev.sprintu.com/imgHelp/final1.png

Wie es ist

a busy cat http://dev.sprintu.com/imgHelp/final2.png

Also für einen Weg, ich bin auf der Suche den Flex-Wert für kleinere Bildschirme (für, wenn layout-sm sich ändern wird angewendet - ändern Sie flex=66 zu flex=100).

Answer 1

Schauen Sie sich die "Responsive Flex & Offset Attribute" Abschnitt hier: https://material.angularjs.org/#/layout/options

Grundsätzlich können Sie diese Optionen verwenden:

• flex - Sets auf alle biegen.
• flex-sm - Setzt den Flex bei weniger als 600 Pixel Breite.
• flex-gt-sm - Legt den Flex für Geräte mit einer Breite von mehr als 600 Pixel fest.
• flex-md - Setzt Flex auf Geräte zwischen 600px und 960px breit.
• flex-gt-md - Legt den Flex für Geräte mit einer Breite über 960 Pixel fest.
• flex-lg - Legt Flex für Geräte zwischen 960px und 1200px fest.
• flex-gt-lg - Legt Flex für Geräte mit einer Breite von mehr als 1200 Pixel fest.

So Ihre ändern:

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

zu

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

Und das div wird nur die 66 Breite verwenden, wenn mehr als kleine (mobile)