角度2材料不调整尺寸或调整移动/较小宽度

我在这里使用Angular 2材质进行基本导航栏设置:

<mat-toolbar color="primary" class="mat-elevation-z2">
  <button mat-icon-button (click)="openSideNav()">
     <mat-icon class="md-24" >menu</mat-icon>
  </button>
  <span>{{this.title}}</span>
  <button mat-button [matMenuTriggerFor]="infoMenu">Information</button>
  <button mat-button [matMenuTriggerFor]="toolsMenu">Tools</button>
  <button mat-button>Blog</button>
  <span class="fill-space"></span>
  <!-- Pull right -->
  <div class="float-right">
    <button mat-icon-button>
      <li class="fa fa-user-circle fa-2x"></li>
    </button>
  </div>
</mat-toolbar>

角度时。io站点已调整大小(适用于移动设备或桌面上的小软件包),它可以很好地进行调整,如下所示:

但是,当我的按钮被重新排列时,按钮就会被从屏幕视图中推出来:

我假设只使用材料项,页面就会自动响应,就像使用引导元素一样。 或者我需要创建代码来做类似于angular上看到的事情吗。io(即检查页面宽度并在页面不在空间时进行调整),如果我必须创建代码,是否有简化的方法来检查工具栏中的项目是否与屏幕不匹配?谢谢