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

问题描述

我正在尝试为div编写CSS，该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.

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

https://material.angularjs.org/latest/#/api/material.core/service/$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屋！