Javascript 根据容器大小调整子内容的大小

我这里有一个简单的进度条原型

代码如下：

const progressBar=document.getElementByIdprogress-bar； progressBar.classList.addprogressBarShow； html{ 溢出：隐藏； -webkit用户选择：无； 用户选择：无； } .集装箱程序{ 位置：相对位置； 溢出：隐藏； 左：0vw； 顶部：60vh； 保证金：0自动； 高度：24小时； 宽度：41vw； 轮廓：0.1vw橙色虚线； } .进度条类{ 位置：绝对位置； 宽度：0vw； 高度：9.436435124508519vh； 利润率：8.9vh 0vw 0vh 2vw； 背景：重复线性梯度45度，红色，红色2.8029947916666659491VW，橙色2.8029947916666659491VW，橙色5.605989958333333297455VW； 边界半径：18vh； 盒影：插图0vw 7.8636959370904332vh 1.4014973583333318982VW rgba255、255、255、0.1，插图0vw 0.786369593709032VH 0vw rgba255、255、255、0.3，插图0vw-3.9318479685452166vh 0.42044921875vw rgba0、0、0、0、0.2、0vw 2.3591087811276VH 0.2802994916666810、0、0.18VW； 左：-0.70074869791666659491vw； 顶部：20vh； 宽度：2.2vw； } 进度条：之后{ 位置：绝对位置； 宽度：30vw； 高度：16vh； 背景：rgba13,13,13,0.7； 边界半径：18vh； 内容：； 左：-0.70074869791666659491vw； 顶部：-3.25vh； z指数：-1； } .节目{ 动画：progressShow 0.3s立方贝塞尔0.230,1.000,0.320,1.000； 动画延迟：0.5s； 动画填充模式：正向； } @-webkit关键帧进度显示{ 从{top:20vh；} 至{top:-3.25vh；} }

---

我用宽度和高度的百分比来表示。我不知道这是否是你想要的，但现在内容根据.containerProgress的宽度和高度调整大小。我也将边距设置为自动。您只需要调整内容的位置或更改边距。见下文：

const progressBar=document.getElementByIdprogress-bar； progressBar.classList.addprogressBarShow； html{ 溢出：隐藏； -webkit用户选择：无； 用户选择：无； } .集装箱程序{ 位置：相对位置； 溢出：隐藏； 左：0vw； 顶部：60vh； 保证金：0自动； 高度：14vh； 宽度：11vw； 轮廓：0.1vw橙色虚线； } .进度条类{ 位置：绝对位置； 身高：80%； 保证金：自动； 背景：重复线性梯度45度，红色，红色2.8029947916666659491VW，橙色2.8029947916666659491VW，橙色5.605989958333333297455VW； 边界半径：18vh； 盒影：插图0vw 7.8636959370904332vh 1.4014973583333318982VW rgba255、255、255、0.1，插图0vw 0.786369593709032VH 0vw rgba255、255、255、0.3，插图0vw-3.9318479685452166vh 0.42044921875vw rgba0、0、0、0、0.2、0vw 2.3591087811276VH 0.2802994916666810、0、0.18VW； 宽度：10%； } 进度条：之后{ 位置：绝对位置； 宽度：1000%； 身高：110%； 背景：rgba13,13,13,0.7； 边界半径：18vh； 内容：； z指数：-1； } .节目{ 动画：progressShow 0.3s立方贝塞尔0.230,1.000,0.320,1.000； 动画延迟：0.5s； 动画填充模式：正向； } @-webkit关键帧进度显示{ 从{top:20vh；} 到{top:-0vh；} }

---

请将大众的所有尺寸更改为px或remSo，这就是问题所在？！我不明白你什么意思？！我是说所有的“大众”单位都转换成px。示例宽度：41vw；到宽度：485pX这有助于解决问题？