Html 车速表没有响应，但需要校准

我用的是这个量表：Stefan Beutler。问题是，我需要使它响应，以便它能够适应家长的大小

我所有的尝试都会导致一个有点不全面的解决方案，我的css技能有限，因此非常感谢您的帮助

HTML:

---

css无法解决这个问题，问题是我认为的自动高度

使用js/jquery的解决方案：

$( window ).resize(function() {
    let newWidth = $('body').width()-30;
    let newHeight = (newWidth/2); 
    let newHeightpx = (newWidth/2) + 'px'; 
    let newWidthpx = newWidth + 'px';

    $('#el').css({
        height: newHeight,
        width: newWidth,
        'border-radius': newWidthpx + ' ' + newWidthpx + ' 0 0'});

    $('<style>#el:before{ width: '+newWidthpx+'; height: '+newHeightpx+'; border-radius: '+newWidthpx+' '+newWidthpx+' 0 0; }</style>').appendTo('head');       
    $('<style>#el:after{ width: '+ (newWidth-60) +'px; height: '+ (newHeight-30) +'px; border-radius: '+(newWidth-60)+'px '+(newWidth-60)+'px 0 0; }</style>').appendTo('head');        
    $('span').css({width: (newWidth/2)-10});
});

$（窗口）。调整大小（函数（）{
让newWidth=$（'body'）.width（）-30；
设newHeight=（newWidth/2）；
设newHeightpx=（newWidth/2）+‘px’；
设newWidthpx=newWidth+'px'；
$（'#el'）.css({
高度：新高度，
宽度：newWidth，
“边界半径”：newWidthpx+''+newWidthpx+'0'}）；
$（“#el:before{width:'+newWidthpx+”；height:'+newHeightpx+”；边框半径：'+newWidthpx+''+newWidthpx+'0；}'）。附录（'head'）；
$（“#el:before{width:'+（newWidth-60）+'px；height:'+（newHeight-30）+'px；边框半径：'+（newWidth-60）+'px'+（newWidth-60）+'px 0；}'）。附加到（'head'）；
$（'span'）.css（{width:（newWidth/2）-10}）；
});

使用css无法解决此问题，问题是我认为的自动高度

使用js/jquery的解决方案：

$( window ).resize(function() {
    let newWidth = $('body').width()-30;
    let newHeight = (newWidth/2); 
    let newHeightpx = (newWidth/2) + 'px'; 
    let newWidthpx = newWidth + 'px';

    $('#el').css({
        height: newHeight,
        width: newWidth,
        'border-radius': newWidthpx + ' ' + newWidthpx + ' 0 0'});

    $('<style>#el:before{ width: '+newWidthpx+'; height: '+newHeightpx+'; border-radius: '+newWidthpx+' '+newWidthpx+' 0 0; }</style>').appendTo('head');       
    $('<style>#el:after{ width: '+ (newWidth-60) +'px; height: '+ (newHeight-30) +'px; border-radius: '+(newWidth-60)+'px '+(newWidth-60)+'px 0 0; }</style>').appendTo('head');        
    $('span').css({width: (newWidth/2)-10});
});

$（窗口）。调整大小（函数（）{
让newWidth=$（'body'）.width（）-30；
设newHeight=（newWidth/2）；
设newHeightpx=（newWidth/2）+‘px’；
设newWidthpx=newWidth+'px'；
$（'#el'）.css({
高度：新高度，
宽度：newWidth，
“边界半径”：newWidthpx+''+newWidthpx+'0'}）；
$（“#el:before{width:'+newWidthpx+”；height:'+newHeightpx+”；边框半径：'+newWidthpx+''+newWidthpx+'0；}'）。附录（'head'）；
$（“#el:before{width:'+（newWidth-60）+'px；height:'+（newHeight-30）+'px；边框半径：'+（newWidth-60）+'px'+（newWidth-60）+'px 0；}'）。附加到（'head'）；
$（'span'）.css（{width:（newWidth/2）-10}）；
});

首先，我没有看到父div！尝试先创建一个父元素lol。首先，将子元素的所有

宽度

、

高度

、

顶部

、

右侧

、

底部

和

左侧

转换为百分比。首先，我没有看到父元素div！尝试先创建一个父元素lol。首先将子元素的所有

宽度

、

高度

、

顶部

、

右侧

、

底部

和

左侧

转换为百分比。

$( window ).resize(function() {
    let newWidth = $('body').width()-30;
    let newHeight = (newWidth/2); 
    let newHeightpx = (newWidth/2) + 'px'; 
    let newWidthpx = newWidth + 'px';

    $('#el').css({
        height: newHeight,
        width: newWidth,
        'border-radius': newWidthpx + ' ' + newWidthpx + ' 0 0'});

    $('<style>#el:before{ width: '+newWidthpx+'; height: '+newHeightpx+'; border-radius: '+newWidthpx+' '+newWidthpx+' 0 0; }</style>').appendTo('head');       
    $('<style>#el:after{ width: '+ (newWidth-60) +'px; height: '+ (newHeight-30) +'px; border-radius: '+(newWidth-60)+'px '+(newWidth-60)+'px 0 0; }</style>').appendTo('head');        
    $('span').css({width: (newWidth/2)-10});
});