Спидометр не реагирует, но должен быть

Я использую этот датчик: http://codepen.io/Sm1lEE/pen/IhbAy by Stefan Beutler. Проблема в том, что мне нужно сделать ее отзывчивой, чтобы она соответствовала размеру родителя.Спидометр не реагирует, но должен быть

Все мои попытки приводят к несколько не круглому решению, мои навыки css ограничены, поэтому помощь оценивается.

HTML:

<body> 
    <div id="el" data-value="0"> 
     <span id="needle"></span> 
    </div> 
</body>

CSS:

#el:before { 
    background: #fbfbfb; 
    border-radius: 200px 200px 0 0; 
    box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15) inset; 
    content: ""; 
    height: 100px; 
    position: absolute; 
    width: 200px; 
} 

#el { 
    border-radius: 200px 200px 0 0; 
    height: 100px; 
    margin: 50px auto 0; 
    overflow: hidden; 
    position: relative; 
    width: 200px; 
} 

#el:after { 
    background: #fff; 
    border-radius: 140px 140px 0 0; 
    bottom: 0; 
    box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15); 
    color: rgba(255, 80, 0, 0.7); 
    content: attr(data-value); 
    font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; 
    font-size: 3.5em; 
    font-weight: 100; 
    height: 70px; 
    left: 30px; 
    line-height: 95px; 
    position: absolute; 
    text-align: center; 
    width: 140px; 
    z-index: 3; 
} 

span { 
    background: rgba(255, 80, 0, 0.7); 
    border-radius: 4px; 
    bottom: -4px; 
    box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); 
    display: block; 
    height: 8px; 
    left: 10px; 
    position: absolute; 
    width: 90px; 
    -webkit-transform-origin: 100% 4px; 
     -ms-transform-origin: 100% 4px; 
      transform-origin: 100% 4px; 
    -webkit-transform: rotate(0deg); 
     -ms-transform: rotate(0deg); 
      transform: rotate(0deg); 
    -webkit-transition: all 1s; 
      transition: all 1s; 
} 

#el:hover span { 
    -webkit-transform: rotate(180deg); 
     -ms-transform: rotate(180deg); 
      transform: rotate(180deg); 
}

источник

2015-11-25 Stn_o

Во-первых, я не вижу, родительский DIV! Попробуйте сделать родительский первый lol. –

Начните с преобразования всех значений 'width',' height', 'top',' right', 'bottom' и' left' дочерних элементов в проценты. –

не смог решить ее с помощью 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}); 
});

источник

2015-11-26 18:52:29

Спидометр не реагирует, но должен быть

ответ

Смежные вопросы