如何用CSS实现HTML5 <progress>元素响应式？（无Bootstrap环境）

基础响应式：不用媒体查询也能搞定 #

其实实现基础的响应式进度条根本不需要媒体查询，核心思路是让进度条自适应父容器宽度：

• 给<progress>设置width: 100%，它会自动跟随父容器的宽度变化而伸缩
• 通过父容器的max-width和padding控制大屏、小屏的显示边界，避免小屏时进度条贴满屏幕边缘

先统一重置浏览器对<progress>的默认样式（不同浏览器默认样式差异极大），再实现自适应：

HTML结构

<div class="progress-wrapper">
  <progress value="65" max="100"></progress>
</div>

CSS实现（跨浏览器兼容）

/* 重置progress默认样式，消除浏览器差异 */
progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%; /* 核心：自适应父容器 */
  height: 14px;
  border-radius: 7px;
  background-color: #f0f0f0;
}

/* WebKit内核浏览器（Chrome、Safari）的进度条背景和填充样式 */
progress::-webkit-progress-bar {
  background-color: #f0f0f0;
  border-radius: 7px;
}

progress::-webkit-progress-value {
  background-color: #2196f3;
  border-radius: 7px;
}

/* Firefox的进度条填充样式 */
progress::-moz-progress-bar {
  background-color: #2196f3;
  border-radius: 7px;
}

/* 父容器：控制最大宽度，小屏自动收缩，左右留边 */
.progress-wrapper {
  max-width: 580px;
  margin: 16px auto;
  padding: 0 12px;
}

为什么你的@media(max-width:768px)没生效？ #

如果想用媒体查询做小屏细节优化（比如调整高度、颜色），没得到理想结果大概率是这几个原因：

1. 样式优先级被覆盖：默认浏览器样式或其他自定义样式优先级比媒体查询里的规则高。解决方法：用更具体的选择器（比如.progress-wrapper progress），或者临时加!important（不推荐，优先调整选择器权重）。
2. 媒体查询位置不对：必须把媒体查询写在普通样式的后面，否则会被前面的样式覆盖。
3. 没针对浏览器伪元素设置：只修改了<progress>本身，没同步修改::-webkit-progress-value、::-moz-progress-bar这类伪元素，导致在Chrome/Firefox里看不到变化。

举个正确的媒体查询示例（小屏调整样式）：

@media (max-width: 768px) {
  .progress-wrapper progress {
    height: 18px; /* 小屏增大进度条高度，提升可读性 */
  }
  .progress-wrapper progress::-webkit-progress-value {
    background-color: #4caf50; /* 小屏更换填充色 */
  }
  .progress-wrapper progress::-moz-progress-bar {
    background-color: #4caf50;
  }
}

总结 #

• 基础响应式用width: 100% + 父容器控制即可，不需要媒体查询
• 媒体查询只用来做小屏的细节优化，注意样式优先级和跨浏览器伪元素的同步修改

内容的提问来源于stack exchange，提问作者Mir Ali