CSS：如何根据屏幕大小调整圆形进度条（移动）

这更像是一个CSS问题

我已经得到了代码来创建一个循环的进度条。我也粘贴了下面的代码

目前，当我使用代码时，它会创建一个固定位置和大小的圆形进度条。i、 e.不随屏幕大小而膨胀或收缩

问题： 如何更新CSS，使其允许圆形条的大小并适合屏幕的大小？因为，圆形条应该适合不同的移动屏幕尺寸

创建循环进度条（Coffescript）的代码 CSS 玉码

---

更新 像素化图形截图

---

以下使用css3查看端口单元

vw、vh、vmin、vmax来解决此问题。基本上，html元素（
canvas，span，div
）的高度将根据视图端口的宽度和高度进行分配

通过使用
vmin
（查看端口最小侧的大小），我们可以调整适当的高度/宽度以匹配屏幕大小

  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;
}

您是否尝试将“最大宽度：80vw”添加到进度表中？谢谢！这很好用。另一方面，进度图看起来非常像素化。有没有办法解决这个问题？（附在OP中的屏幕截图）这是因为css用于操纵画布的W和H，从而拉伸画布内的像素。为了避免这种情况，您需要直接使用画布的canvas
height
和
width
属性。在您的情况下，以下js更改将增加画布宽度以匹配当前的视图端口大小。[参见Js中的编辑]（）：：：：：：：：：：：：：：：：：：：：：：：：：：var options={…size:el.getAttribute（'data-size'）| | |（screen.width-5），lineWidth:el.getAttribute（'data-line'）| | 50，}:！作品非常感谢你在这方面的帮助。
.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;
  }  
}

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

  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;
}