Как написать css для конкретной точки останова в angular материале

Я пытаюсь написать CSS для div, который должен применяться только при ударе конкретной точки останова, например. sm, md или lg.

Я использую angular -материал (https://material.angularjs.org).

Я знаю, что это можно сделать с помощью медиа-запросов @media (max-width: 480px) { ... }, но я ищу angular -материальный способ сделать это.

Ответ 1

Я использую службу $mdMedia для этого:

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

Кроме того, вы можете использовать его в шаблоне напрямую, например. с директивой ng-класса:

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

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

Ответ 2

Добавление пользовательского css в тег с использованием контрольных точек материала. Скажем, у меня есть собственный CSS-код, как показано ниже:

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

и вы хотите добавить его в тег h3, если это не мобильное устройство, а затем выполните следующие шаги.
1. Добавьте ngMaterial в модуль.

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

2. введите $mdMedia в контроллер

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

3. Теперь используйте $mdMedia, как описано Робом ранее:

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