Angular 4的Material框架是否像Bootstrap一样响应式？

Question

我开始一个新的项目，使用Angular 4，需要创建响应式且美观的用户界面。

• Bootstrap可以实现响应式，但没有 Material Design 的感觉。
• Angular Material提供漂亮的 UI 体验。https://material.angular.io

我了解 Bootstrap，并在以前的 AngularJS 应用中使用过它，但对于 Angular Material 我还不熟悉。文档看起来很容易跟进，但我找不到响应式支持。

我不想混合使用它们，但我一直没有找到 Bootstrap 提供列响应式以支持移动设备的功能。

我是不是漏掉了什么？ Angular Material 是否支持类似的响应式设计，或者我应该在我的应用程序中同时使用这两个框架？

- Brian

---

请查看 @angular/flex-layout。Material 组件在某种程度上是响应式的（字体大小、文本修饰等），但为了创建响应式布局，Angular 提供了上述包。 - Jota.Toledo

它能否与@angular/material无冲突地工作？ - Brian

是的，没有问题 - Jota.Toledo

Answer 1

为了使现代的Angular应用程序具有响应性，您可以使用Flex-layout。它与material2完全独立，因此即使在不使用material2的情况下也可以在应用程序中使用。

请注意，flex-layout基于Flexbox CSS，因此在旧浏览器中不支持。

这里有一些示例

同时，请查看新的ngAir episode，其中讨论了Flex-Layout

更新：

从6.0.0-beta.16开始，flex-layout现在具有支持CSS网格的API。您可以通过检查pr#712获取更多详细信息

- angularrocks.com

---

我尝试了一下，发现它只是缩小内容，而不是让每个内容在视图大小改变时自然地折叠。 :D - Jhourlad Estrella

@JhourladEstrella 你有没有查看flexbox的响应式API？ - pravin

但似乎所有版本都是测试版。 - Abhinandan Khilari

@AbhinandanKhilari https://github.com/angular/flex-layout/issues/713 - angularrocks.com

Answer 2

我有一个起始模板，展示了一个响应式布局的例子，使用了Material 5和Angular 5，并包含一些简单的路由。有点晚了，但这是链接: https://github.com/kenji-1996/material-sidenav-responsive-starter 使用了Material和Flex，没有外部库。

- Cacoon