angularjs - 如何为 Angular Material 中的特定断点编写CSS

Question

我正在尝试为 div 编写 CSS，它应该仅在遇到特定断点时应用，例如。 sm、md 或 lg。

我正在使用 Angular Material ( https://material.angularjs.org )。

我知道这可以使用媒体查询来完成 @media (max-width: 480px) { ... } 但我正在寻找一种 Angular Material 的方法来做到这一点。

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 >