如何降低字体大小以适应div中的新用户数字

Question

是否有一种方法可以降低digit的字体大小，当用户添加更多的数字，以便它可以适合boxdiv?

import { useState } from "react";
import "./styles.css";
export default function App() {
const [digit, setDigit] = useState(32);
return (
<div className="App">
<div className="box">{digit}</div>
<input
type="text"
value={digit}
onChange={(e) => setDigit(e.target.value)}
/>
</div>
);
}

css

.App {
font-family: sans-serif;
text-align: center;
max-width: 1024px;
margin:auto;
background-color: green;
height:100%;
padding:20px;
}
.box{
width:50%;
height:35px;
background:yellow;
margin:auto;
font-size:30px;
}

Answer 1

我强烈不建议这样做，但只是为了提供信息，这是一个公式，使流体字体大小，也许你可以使用它:

.box {
font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

这个方程的问题，正如我之前经历的，是它不会自动计算(我不知道为什么)，所以你需要每次用户输入一个新数字时更新它。