jak napisać css dla określonego punktu przerwania w kanciastym materiale

Question

Próbuję napisać CSS dla div, który powinien mieć zastosowanie tylko wtedy, gdy zostanie uderzony konkretny punkt przerwania, np. sm, md lub lg.

Używam materiału kątowego (https://material.angularjs.org).

Wiem, że można to zrobić za pomocą zapytań o media @media (max-width: 480px) { ... }, ale szukam sposobu na zrobienie tego w sposób kanciasto-materiałowy.

Answer 1

Używam usługę $ mdMedia na to, patrz:

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

Dodatkowo można go użyć w szablonie bezpośrednio np z dyrektywą ng-Klasa:

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

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

Answer 2

Dodawanie niestandardowego CSS do znacznika przy użyciu punktów przerwania materialne, Say Załóżmy, że mam zwyczaj css jak poniżej:

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

i chcesz dodać go do h3 tag, jeśli nie jest urządzeniem mobilnym, a następnie wykonaj poniższe czynności.
1. Dodaj ngMaterial do modułu.

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

2. inject $ mdMedia do kontrolera

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

3. Teraz użyj $ mdMedia jak opisano wcześniej przez Rob:

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