Question

我正在尝试为div编写CSS，这应该仅在特定断点被触发时应用，例如。 sm，md或lg。

我使用了角度材质（https://material.angularjs.org）。

我知道这可以使用媒体查询forEach来完成，但我正在寻找一种角度材料的方法。

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>

如何为角度材质中的特定断点编写css

2 个答案: