使用 Flex 容器缩放 Flex 项目以保持相对缩放？答案

【问题标题】：Scale Flex Items with Flex container to keep relative scale?使用 Flex 容器缩放 Flex 项目以保持相对缩放？
【发布时间】：2021-10-11 01:07:10
【问题描述】：

我正在用 html 构建一个页面，该页面看起来很好，并且在桌面上效果很好，看起来像这样 Desktop Version

但是当我将其全部缩小时，文本容器被强制缩小，然后变小，如这里所示

Mobile Version

困难在于我尝试了很多东西（请参阅下面的列表），但似乎都没有奏效！

这是项目的结构，完全封装在一个弹性容器中

 <div class="card" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-glare data-tilt-scale="1.15" data-tilt-max-glare="0.5">
  <img src="/Coach Placeholder.png" alt="Coach">
  <div class= "container">

      <h4><b>John Doe</b></h4>

      <p> Football Coach </p>

  </div>

和@media 通话

     @@media (max-width: 780px) {
    .flex-container {
        flex-direction: column;
    }

    .card{
        max-width:75%;
    }

    h4{
    font-size: 4vw;
    text-align:left;
}

p{
    font-size: 2.5vw;
    text-align:left;
}

}

我无法强迫文本变大，我也尝试过更改字体大小。

感谢您的帮助！

【问题讨论】：

标签： html css blazor

【解决方案1】：

您已使用vw 单位将字体大小设置为取决于视口宽度。每个vw 单位是视口宽度的 1%。所以桌面可能是 1920px 宽，因此 1vw 等于 19.2px。移动显示大约有 640 像素，这将使 1vw 等于 6.4 像素。

如果您想保留文本的大小，我建议您使用rem 或px。 rem 是相对单位，px 是绝对单位。您可以在Mozilla Developer Docs 上阅读有关它们的更多信息。

这是我为您制作的CodePen。

【讨论】：