come scrivere css per un breakpoint specifico in materiale angolare

Question

Sto provando a scrivere CSS per un div, che dovrebbe applicarsi solo quando viene colpito un particolare punto di interruzione, ad es. sm, md o lg.

Sto usando materiale angolare (https://material.angularjs.org).

So che questo può essere fatto utilizzando le query multimediali @media (max-width: 480px) { ... } ma sto cercando un modo angolare-materiale per farlo.

Answer 1

sto usando il servizio di $ mdMedia per questo, vedi:

https://material.angularjs.org/latest/#/api/material.core/service/ $ mdMedia

Inoltre si può utilizzare in un modello direttamente per esempio con una direttiva ng-classe:

// In your controller: 
$scope.$mdMedia = $mdMedia; 

// In your template: 
<div ng-class="{sm: $mdMedia('sm'), md: $mdMedia('md'), lg: $mdMedia('lg')}">...</div > 

Answer 2

Aggiunta CSS personalizzato a un tag utilizzando i punti di interruzione del materiale, Say supponiamo di avere un CSS personalizzato come di seguito:

.textLeft{ 
text-align: left; 
margin-left: 24%; 
} 

e si voleva aggiungerlo a una h3 tag se non si tratta di un dispositivo mobile, quindi segui i passaggi seguenti.
1. Aggiungere ngMateriale al modulo.

var app = angular.module('MyApp',['ngMaterial']); 

2. iniettare $ mdMedia al controllore

app.controller('TabCtrl', ['$scope','$mdMedia', function($scope,$mdMedia){ 
    var thisCtrl = this; 
    $scope.$mdMedia = $mdMedia; 
}]); 

3. Ora usare il $ mdMedia come descritto da Rob in precedenza:

<div ng-controller="TabCtrl" layout="column"> 
<h3 ng-class="{'textLeft' : $mdMedia('gt-sm')}"> 
         {{user.name}}</h3> 
</div>