如何为角度材料中的特定断点编写css答案

【问题标题】：how to write css for a specific breakpoint in angular material如何为角度材料中的特定断点编写css
【发布时间】：2015-09-02 00:13:36
【问题描述】：

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

我正在使用角度材料 (https://material.angularjs.org)。

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

【问题讨论】：

检查布局部分：material.angularjs.org/latest/#/layout/options
我以前经历过这个......不知道这如何解决我目前的问题
或者你可以这样做：@media (min-width: $layout-breakpoint-xs) { 就像在引导程序中一样。

标签： angularjs responsive-design material-design angularjs-material

【解决方案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 >

【讨论】：

在使用角度材料时，我一直在包含 MaterializeCss 实现而不是响应表。好的专业提示！

【解决方案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>

【讨论】：