angularjs - angularマテリアルの特定のブレークポイントのcssを書く方法

Question

特定のブレークポイントがヒットした場合にのみ適用される div 用の CSS を作成しようとしています。sm、md、または lg。

angular-material ( https://material.angularjs.org ) を使用しています。

これはメディアクエリを使用して実行できることは知っていますが、これを行う@media (max-width: 480px) { ... }ための角度のある素材の方法を探しています。

Answer 1

そのために $mdMedia サービスを使用しています。次を参照してください。

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

さらに、たとえば ng-class ディレクティブを使用して、テンプレートで直接使用できます。

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

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