Question

我正在使用这个Gauge：Stefan Beutler的http://codepen.io/Sm1lEE/pen/IhbAy。问题是我需要使其响应，以便它适应父母的大小。

我的所有尝试都会导致一个有点不圆的解决方案，我的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);
}

Answer 1

无法用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});
});

车速表没有响应但需要

1 个答案: