如何让用作评分组件的progress bars实现响应式适配？

嘿，我来帮你搞定这个响应式进度条的问题！从你描述的情况来看，主要问题出在宽度单位缺失和浮动布局的局限性上，咱们一步步来优化：

1. 先修复JavaScript的核心问题 #

你当前的JS代码设置进度条宽度时没有加单位，浏览器会默认把数字当成px而不是百分比，这就导致窗口缩小后进度条不会跟着容器收缩，直接溢出了。修改很简单，给数值加上%即可：

var par1 = 4; 
for(var i = 10; i < 16; i++) { 
  $('.p' + (i+1)).text(table[0][par1]); 
  // 这里加上百分比单位，确保宽度相对于父容器计算
  $('.bar' + (i+1)).css("width", `${table[0][par1]}%`); 
  par1++; 
}

2. 用Flexbox替换浮动布局，提升响应式稳定性 #

浮动布局在响应式场景下容易出现排版错乱，Flexbox是更现代、更可靠的选择，还能省去clearfix的麻烦。咱们重写CSS布局部分：

* { 
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}

/* 用Flexbox实现评分项的行布局 */
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center; /* 垂直居中内容，视觉更整齐 */
  margin-bottom: 10px; /* 每个评分项之间留间距 */
}

.side {
  width: 15%;
  padding: 0 8px;
}

.middle {
  width: 70%;
  padding: 0 8px;
}

.right {
  text-align: left;
}

/* 进度条容器优化 */
.bar-container {
  width: 100%; /* 占满middle列的全部可用宽度 */
  background-color: #f1f1f1;
  height: 18px; /* 统一设置容器高度，进度条继承 */
  border-radius: 9px; /* 可选：加圆角让视觉更柔和 */
  overflow: hidden; /* 确保进度条不会超出容器边界 */
}

/* 统一进度条样式，减少行内代码 */
[class^="bar"] {
  height: 100%; /* 继承容器高度 */
  background-color: gold;
  transition: width 0.3s ease; /* 可选：宽度变化时的平滑过渡动画 */
}

/* 响应式断点调整（适配小屏幕） */
@media (max-width: 600px) {
  .side, .middle {
    width: 100%;
    margin-bottom: 8px;
  }
  .right {
    width: auto;
    margin-left: auto; /* 把数值移到右侧，节省空间 */
  }
  /* 小屏幕下调整布局：评分标签在上，进度条+数值在一行 */
  .row {
    flex-direction: column;
    align-items: flex-start;
  }
  .row > .middle {
    width: calc(100% - 60px); /* 给数值留出固定宽度 */
  }
  .row > .right {
    width: 60px;
    margin-left: 0;
  }
}

3. 简化HTML代码，移除冗余行内样式 #

把进度条里的height和background-color从行内样式删掉，交给CSS统一管理，代码更简洁易维护：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
  <div class="row">
    <div class="side">
      <div>5 stars</div>
    </div>
    <div class="middle">
      <div class="bar-container">
        <div class="bar11" style="width: 10%;"></div>
      </div>
    </div>
    <div class="side right">
      <div class="p11">150</div>
    </div>
    <!-- 其他评分项以此类推 -->
  </div>
</div>

优化后的效果说明 #

• 进度条宽度现在是相对于父容器的百分比，窗口调整时会自动收缩/拉伸，不会溢出。
• Flexbox布局让整个评分模块在不同屏幕尺寸下都能保持整齐的排版。
• 小屏幕下会自动调整布局，把评分标签放在上方，进度条和数值横向排列，提升移动端可读性。

内容的提问来源于stack exchange，提问作者Rulli Smith