CSS: 如何根据屏幕尺寸适配圆形进度条（移动端）

Question

这更像是一个 CSS 问题。

我已经从这个 link 获得了创建循环进度条的代码。我也粘贴了下面的代码。

目前，当我使用代码时，它创建了一个固定位置和大小的圆形进度条。即不随屏幕尺寸扩大或缩小。

问题: 我如何更新 CSS 以使其允许圆条的大小并适合屏幕的大小？因为，圆形条应该适合不同的手机屏幕尺寸。

创建循环进度条的代码 (Coffescript)

el = document.getElementById('graph')
# get canvas
options = 
  percent: el.getAttribute('data-percent')
  size: el.getAttribute('data-size') or 220
  lineWidth: el.getAttribute('data-line') or 20
  rotate: el.getAttribute('data-rotate') or 0
canvas = document.createElement('canvas')
span = document.createElement('span')
span.textContent = options.percent + '%'
if typeof G_vmlCanvasManager != 'undefined'
 G_vmlCanvasManager.initElement canvas
ctx = canvas.getContext('2d')
canvas.width = canvas.height = options.size
el.appendChild span
el.appendChild canvas
ctx.translate options.size / 2, options.size / 2
# change center
ctx.rotate (-1 / 2 + options.rotate / 180) * Math.PI
# rotate -90 deg
#imd = ctx.getImageData(0, 0, 240, 240);
radius = (options.size - (options.lineWidth)) / 2

drawCircle = (color, lineWidth, percent) ->
  percent = Math.min(Math.max(0, percent or 1), 1)
  ctx.beginPath()
  ctx.arc 0, 0, radius, 0, Math.PI * 2 * percent, false
  ctx.strokeStyle = color
  ctx.lineCap = 'round'
  # butt, round or square
  ctx.lineWidth = lineWidth
  ctx.stroke()
  return

drawCircle '#efefef', options.lineWidth, 100 / 100
drawCircle '#555555', options.lineWidth, options.percent / 100

CSS

.progress_chart {
  position:relative;
  margin: 80px;
  width: 220px; height: 220px;
  canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
  }
  span {
    color:#555;
    display:block;
    line-height:220px;
    text-align:center;
    width:220px;
    font-family:sans-serif;
    font-size:40px;
    font-weight:100;
    margin-left:5px;
  }

  input {
    width: 200px;
  }  
}

JADE 代码

.progress_chart
  #graph.chart(data-percent='14')

更新

像素化图的截图

Answer 1

以下使用 css3 视口单位 vw, vh, vmin, vmax 来解决这个问题。基本上 html 元素的 (canvas, span, div) 高度将根据视口的宽度和高度分配。 See detail explanation

通过使用 vmin（视口最小边的尺寸），我们可以调整适当的 height/width 以匹配屏幕尺寸。

  div {
  /* take the viewport Width & Height */
  width: 100vw;
  height: 100vh;
  /* horizontal centers content */
  text-align: center;
  /* vertical centers content */
  display: table-cell;
  vertical-align: middle;
}

canvas {
  width: auto;
  /* 90% of smallest-side */
  height: 90vmin;
}

span {
  position: absolute;
  /* 20% of smallest-side */
  font-size: 20vmin;
  /* 90% of smallest-side */
  line-height: 90vmin;
  /* 90% of smallest-side */
  width: 90vmin;
}

See demo

CSS: 如何根据屏幕尺寸适配圆形进度条（移动端）

CSS: How to fit a circular progress bar according to screen size (mobile)

css

coffeescript

progress-bar

pug

创建循环进度条的代码 (Coffescript)

CSS

JADE 代码

更新