如何在没有javascript的情况下根据父宽度更改子元素中的字体大小[重复]答案

【问题标题】：How change font size in child element base on parent width without javascript [duplicate]如何在没有javascript的情况下根据父宽度更改子元素中的字体大小[重复]
【发布时间】：2020-10-10 16:12:51
【问题描述】：

我有一个带有数字宽度的框，我想根据父宽度更改子元素的字体大小，我使用了 vw 或 em，但不起作用，仅使用 css 或 sass 即可

<div class="timer" >
 <div class="timer__minute">12</div>
</div>

sass

.timer{
min-width:100px;
max-width:500px;
&__minute{
 padding:10px
}
}

【问题讨论】：

我怀疑 Stack Overflow 上是否有魔术师可以调试他们看不到的代码。请在您的问题旁边发布您的代码????
这能回答你的问题吗？ Font scaling based on width of container 检查第二好的投票答案，但或多或少的答案是：如果你有最大宽度，这是不可能的。或者你在 svg 中获得第三佳投票

标签： css sass

【解决方案1】：

:root {
  --width: 10em;
}

.parent {
width: var(--width);
height: 100px;
border: 1px solid #333;
display: grid;
place-content: center;
}

.parent p {
  margin: 0;
  font-size: calc(var(--width) /4);
}

<div class="parent">
  <p>Hello</p>
</div>

使用自定义属性或 sass 变量和 calc 函数来满足您的需求

【讨论】：

感谢您的回复，但我没有静态宽度，它有最小宽度和最大宽度