如何在角材料中为特定断点编写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

另外，你可以在模板中直接使用它例如与纳克级的指令：

// 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.现在使用$ mdMedia如罗布前面描述：

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