2

我有一个mat-sidenav装满组件的mat-card组件。在 sidenav 之外，我有我的页面的其余部分。我想要的是让我的 sidenav 卡组件保持与有人放大和缩小页面完全相同的大小。我已经说明了我的意思：

在此处输入图像描述

左边的图片是我放大前的页面，右边是放大后的页面。sidenav（框）之外的内容会相应地缩放和缩放，我的 sidenav 本身有一个最大宽度设置，即使在缩放后也不会超过（我已经实现了这一点）。我的问题在于垫卡组件（表示为圆圈）。我希望我的垫卡在缩放后也保持与图像中所示相同的大小，但是，它们就像我在 sidenav 之外的组件一样增长。我的垫子卡也单独包装在<a>标签中。我需要它，好像放大和缩小根本不会影响 sidenav 或其内容，我该如何实现呢？

4

1 回答 1

2

我建议您使用 CSS 单元：vw 和 vh。

vw=1 是相对于视口宽度的 1%，而 vw=100 是 100%。vh=1 是相对于视口高度的 1%，而 vh=100 是 100%。

大小将始终根据您所看到的大小进行调整。因此，即使您放大或缩小，视口将保持不变，因此组件的大小不会改变。

您可以在以下示例中对其进行测试：

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh

于 2019-08-26T13:07:00.273 回答