md-toolbar 的 CSS 媒体查询

Question

我有一个来自 Angular material 2 的 md-toolbar，它固定在页面上

<md-toolbar id="floating-toolbar" color="primary"></md-toolbar>

<md-progress-bar *ngIf="true" class="floating-progress" mode="indeterminate" color="accent"></md-progress-bar

#floating-toolbar {
  position: fixed;
  z-index: 1001;
}

我想在该固定工具栏下方放置一个进度条。我发现 AngularMaterial2 的 md-toolbar 高度根据屏幕宽度而变化。所以我通过查看视口(viewport)痛苦地计算出以下内容

@media (max-width: 599px){
  .floating-progress {
    position: fixed;
    margin-top: 56px;
    z-index: 1002;
  }
}

@media (min-width: 600px) and (max-width: 650px){
  .floating-progress {
    position: fixed;
    margin-top: 64px;
    z-index: 1002;
  }
}


@media (min-width: 651px) and (max-width: 959px){
  .floating-progress {
    position: fixed;
    margin-top: 48px;
    z-index: 1002;
  }
}

@media (min-width: 960px) {
  .floating-progress {
    position: fixed;
    margin-top: 64px;
    z-index: 1002;
  }
}

这似乎只有当页面高度在我的桌面上全屏时才有效。一旦我降低高度(模拟较小的屏幕或纵向屏幕，这些规则就不再有效，因为工具栏的高度似乎是宽度和高度的变量。

有没有办法轻松解决这个问题，例如简单地捕捉固定位置工具栏下方的进度条。

我在 md-toolbar 的 scss 文件中找到了这个，这可能有帮助吗？

//toolbar.scss

$md-xsmall: 'max-width: 600px';
$md-small: 'max-width: 960px';

$md-toolbar-height-desktop: 64px !default;
$md-toolbar-height-mobile-portrait: 56px !default;
$md-toolbar-height-mobile-landscape: 48px !default;

$md-toolbar-font-size: 20px !default;
$md-toolbar-padding: 16px !default;


@mixin md-toolbar-height($height) {
md-toolbar {
    min-height: $height;
}
md-toolbar-row {
    height: $height;
}
}

md-toolbar {
display: flex;
box-sizing: border-box;

width: 100%;

// Font Styling
font-size: $md-toolbar-font-size;
font-weight: 400;
font-family: $md-font-family;

padding: 0 $md-toolbar-padding;

flex-direction: column;

md-toolbar-row {
    display: flex;
    box-sizing: border-box;

    width: 100%;

    // Flexbox Vertical Alignment
    flex-direction: row;
    align-items: center;
}
}

// Set the default height for the toolbar.
@include md-toolbar-height($md-toolbar-height-desktop);

// Specific height for mobile devices in portrait mode.
@media ($md-xsmall) and (orientation: portrait) {
  @include md-toolbar-height($md-toolbar-height-mobile-portrait);
}

// Specific height for mobile devices in landscape mode.
@media ($md-small) and (orientation: landscape) {
  @include md-toolbar-height($md-toolbar-height-mobile-landscape);
}

/*toolbar.css*/
md-toolbar,md-toolbar md-toolbar-row {
    display:flex;
    box-sizing:border-box;
    width:100%
}
md-toolbar{
    font-size:20px;
    font-weight:400;font-family:
    Roboto,"Helvetica Neue",sans-serif;
    padding:0 16px;
    flex-direction:column;
    min-height:64px
}
md-toolbar md-toolbar-row{
    flex-direction:row;
    align-items:center
}
md-toolbar-row{
    height:64px
}
@media (max-width:600px) and (orientation:portrait){
    md-toolbar{
        min-height:56px
    }
    md-toolbar-row{
        height:56px
    }
}
@media (max-width:960px) and (orientation:landscape){
    md-toolbar{
        min-height:48px
    }
    md-toolbar-row{
        height:48px
    }
}

Answer 1

我通过将 md-toolbar 和 md-progress bar 作为一个单元放在 floating-header-div 类中解决了这个问题。这样无论大小，进度条总是在工具栏下方

<!--floating header-->
<div class="floating-header-div">
  <md-toolbar>
    <button md-icon-button class="ml-xs toolbar-button" (click)="sidenav.toggle()">
      <md-icon id="menu-icon">menu</md-icon>
    </button>
    <span id="app-title">MyApp</span>
  </md-toolbar>
  <md-progress-bar *ngIf="isLoading" mode="indeterminate" color="accent"></md-progress-bar>
</div>


/*------------------------------*/
/*tool bar*/
/*------------------------------*/
.floating-header-div {
  position: fixed;  
  z-index: 999;
  width: 100%;  
}