首页 > 解决方案 > 媒体查询在 chrome 中工作,但在 Firefox 中不工作

问题描述

我为 chrome 编写了一个媒体查询,它在 Firefox 中无法正常工作。

我正在尝试1366*768屏幕分辨率。

我附上了 Chrome 的工作截图和 Firefox 的工作截图。

HTML:

    <div class="row m-row--no-padding m-row--col-separator-xl">
        <div class="my-widget-gridster">
          <!-- Widget Gridster-->
          <gridster *ngIf="data.length>0" [options]="options">
            <gridster-item [item]="item" [ngClass]="{ 'gridster-item-maximize': item.pod.podMaximized }" *ngFor="let item of data; let i= index;" (contextmenu)="onPodContextMenu($event, item); $event.preventDefault()" >
              <e-pod [type]="type" [refreshCount]="count"  [iPodModel]="item.pod"  [index]="i"  (widgetMinMaxEmit)="onPodMaximize($event, item, i)"></e-pod>
            </gridster-item>
          </gridster>
        </div>
  </div>

CSS:

@media screen and (min-width: 1366px) and (max-height: 768px) {
    .gridster-item-maximize {
        transform: translate3d(0px, 0px, 0px);
        display: block;
        z-index: 9999;
        position: fixed;
        width: 74.6% !important;
        height: 78.8% !important;
        top: 20.6%;
        left: 24.9%;
        bottom: 0;
        overflow: auto;
    }
}

预期:为 Chrome 编写的媒体查询应该适用于所有浏览器。

实际:适用于 chrome,而不是 Firefox。

铬合金:

工作铬屏幕截图

火狐:

无法在 Firefox 屏幕截图中工作

标签: cssmedia-queries

解决方案


推荐阅读