Css 如何根据屏幕宽度切换垫子扩展面板？

我有一个扩展面板，需要在某些媒体设备上关闭。例如，如果web应用在移动设备中，我想收缩扩展面板，如果它在桌面上，我想扩展它。我怎样才能达到这个要求

这是我使用的垫子扩展面板

<mat-accordion class="example-headers-align">
                <mat-expansion-panel>
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      Description
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <p class="">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet mauris commodo quis imperdiet massa tincidunt. Viverra nibh cras pulvinar mattis nunc sed blandit. Sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Consectetur lorem donec massa sapien faucibus. In est ante in nibh. Ullamcorper malesuada proin libero nunc consequat interdum varius. Curabitur vitae nunc sed velit. Mauris a diam maecenas sed enim ut sem viverra.        
                  </p>
                </mat-expansion-panel>
              </mat-accordion> 

---

我们将不胜感激。提前感谢。

在.ts文件中，您可以访问窗口宽度。可以使用以下属性之一执行此操作：

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;

然后，您只需根据返回的号码以编程方式切换

mat扩展面板

---

您应该能够使用此问题的答案之一进行扩展：

在.ts文件中，您可以访问窗口宽度。可以使用以下属性之一执行此操作：

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;

然后，您只需根据返回的号码以编程方式切换

mat扩展面板

---

您应该能够使用此问题的一个答案进行扩展：

对于这种情况，您可以使用控制器端的媒体查询，而不是CSS文件

我的意思是说，将屏幕宽度的值（使用JS的媒体查询）存储在某个变量中，并根据变量的值切换手风琴

在

mat扩展面板中

使用

expanded

           <mat-accordion class="beagel-headers-align">
            <mat-expansion-panel [expanded]="isMobileWidth">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Description
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p class="">
                Lorem ipsum.....
              </p>
            </mat-expansion-panel>
          </mat-accordion> 


          isMobileWidth = true // check here using media query in .ts file

描述

乱数假文。。。。。

isMobileWidth=true//在.ts文件中使用媒体查询检查此处

对于此类场景，您可以使用控制器端的媒体查询，而不是CSS文件

我的意思是说，将屏幕宽度的值（使用JS的媒体查询）存储在某个变量中，并根据变量的值切换手风琴

在

mat扩展面板中

使用

expanded

           <mat-accordion class="beagel-headers-align">
            <mat-expansion-panel [expanded]="isMobileWidth">
              <mat-expansion-panel-header>
                <mat-panel-title>
                  Description
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p class="">
                Lorem ipsum.....
              </p>
            </mat-expansion-panel>
          </mat-accordion> 


          isMobileWidth = true // check here using media query in .ts file

描述

乱数假文。。。。。

isMobileWidth=true//在.ts文件中使用媒体查询检查此处

谢谢这让我想到了这一点。使变量为真对我有帮助。多亏了这一点，我才有了这个想法。使变量为真对我有帮助。