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

Posted 2023-03-07

【中文标题】如何为角度材料中的特定断点编写css

【英文标题】：how to write css for a specific breakpoint in angular material

【发布时间】：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) 就像在引导程序中一样。

【参考方案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>