如何在没有javascript的情况下根据父元素的宽度更改子元素的字体大小

Question

我有一个数字宽度的框，我想根据父元素的宽度更改子元素的字体大小，我使用了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
}
}

Answer 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变量和计算函数来满足您的需求