Angular 11 mat-menu 在小屏幕上不起作用

Question

我正在使用 angular-mat(v11) 菜單，該菜單在筆記本電腦和 iPad 屏幕上運行良好，但在移動縱向屏幕上它不起作用。 下面是代碼，

這是HTML代碼

 <div class="showOnSmallScreens">
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
            </mat-menu>
        </div>

用於在大屏幕上顯示的不同 div。

CSS代碼

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
@media (min-width: 1025px) and (max-width: 1280px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    .addLayer {
        margin-left: 6rem;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
@media (min-width: 768px) and (max-width: 1024px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
@media (min-width: 481px) and (max-width: 767px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
@media (min-width: 320px) and (max-width: 480px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

@media (min-width: 280px) and (max-width: 319px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

還有一個針對景觀的媒體查詢，這有什么問題嗎？

我不確定為什么會這樣。 任何幫助深表感謝。

Answer 1

我正在使用 angular-mat(v11) 菜單，該菜單在筆記本電腦和 iPad 屏幕上運行良好，但在移動縱向屏幕上它不起作用。 下面是代碼，

這是HTML代碼

 <div class="showOnSmallScreens">
            <button mat-button [matMenuTriggerFor]="menu">Menu</button>
            <mat-menu #menu="matMenu">
                <button mat-menu-item>Item 1</button>
                <button mat-menu-item>Item 2</button>
            </mat-menu>
        </div>

用於在大屏幕上顯示的不同 div。

CSS代碼

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
@media (min-width: 1025px) and (max-width: 1280px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    .addLayer {
        margin-left: 6rem;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */
@media (min-width: 768px) and (max-width: 1024px) {
    .showOnSmallScreens {
        display: none;
    }
    .showOnLargeScreens {
        display: block;
    }
    
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */
@media (min-width: 481px) and (max-width: 767px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */
@media (min-width: 320px) and (max-width: 480px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

@media (min-width: 280px) and (max-width: 319px) {
    #sidebar {
        max-width: 48px;
    }
    #sidebar .nav-link span {
        position: absolute;
        opacity: 0;
    }
    .showOnSmallScreens {
        display: block;
    }
    .showOnLargeScreens {
        display: none;
    }
}

還有一個針對景觀的媒體查詢，這有什么問題嗎？

我不確定為什么會這樣。 任何幫助深表感謝。