Disegno materiale angolare - Modificare il valore di flessione con la dimensione dello schermo

Question

Sono nuovo di AngularJS quindi per favore abbiate pazienza con me. Sto usando Angular Material Design e ho difficoltà nell'individuare un modo per rendere efficienti le griglie reattive.

Si prega di vedere i miei commenti nel codice qui sotto:

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

Ma cambiando i valori flex di cui sopra da "flex=66" e "flex=32" semplicemente flex e flex, mi dà risultato desiderato in dispositivi mobili, tuttavia, come lo sapresti, in desktop, invece del rapporto 2: 1 che occupa metà e metà.

Vedere anche le immagini allegate.

Previsto

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

Come è

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

Quindi sto cercando un modo per cambiare il valore della flessione per schermi di piccole dimensioni (per quando layout-sm è applicato - cambia flex=66 a flex=100).

Answer 1

Scopri i "Responsive Flex & Offset Attributi" sezione qui: https://material.angularjs.org/#/layout/options

In sostanza, è possibile utilizzare queste opzioni:

• flex - Imposta flettono su tutti.
• flex-sm - Imposta la flessibilità su dispositivi con larghezza inferiore a 600 px.
• flex-gt-sm - Imposta la flessibilità su dispositivi con larghezza superiore a 600 px.
• flex-md - Imposta la flessibilità sui dispositivi tra 600 e 960 px di larghezza.
• flex-gt-md - Imposta la flessibilità su dispositivi con larghezza superiore a 960 px.
• flex-lg - Imposta la flessibilità sui dispositivi tra 960px e 1200px.
• flex-gt-lg - Imposta la flessibilità su dispositivi con larghezza superiore a 1200 px.

Così cambia la tua:

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

a

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

E questo div userà solo la larghezza 66, quando maggiore di piccole dimensioni (mobile)