angularjs - 如何为角度材料中的特定断点编写css

Question

我正在尝试为一个 div 编写 CSS，这应该只在遇到特定断点时才适用，例如。sm、md 或 lg。

我正在使用角度材料（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 >

Answer 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. 现在使用 Rob 之前描述的 $mdMedia：

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