如何为角度材料中的特定断点编写 css [英] how to write css for a specific breakpoint in angular material

问题描述

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

I am trying to write CSS for a div, that should apply only when a particular breakpoint is hit, eg. sm, md or lg.

我正在使用 angular-material (https://material.angularjs.org).

I'm using angular-material (https://material.angularjs.org).

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

I know that this can be done using media queries @media (max-width: 480px) { ... } but i'm looking for a angular-material way of doing this.

推荐答案

为此我正在使用 $mdMedia 服务，请参阅:

I'm using the $mdMedia service for that, see:

https://material.angularjs.org/latest/#/api/material.核心/服务/$mdMedia

此外，您可以直接在模板中使用它，例如使用 ng-class 指令:

Additionally you can use it in a template directly e.g. with an ng-class directive:

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

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

这篇关于如何为角度材料中的特定断点编写 css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！