缩放时，在两端之间没有对齐内容的情况下显示柔性无法正常工作

Question

我想创建这种进度条：

我是通过简单地创建5个div（嵌套在显示flex div中）来做到这一点的。

div {
  width: 42px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

div>div {
  background-color: red;
  width: 15%;
  height: 10px;
}

<div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

问题是当我缩小页面时。宽度不保持其大小：

我知道是否将外部div的宽度定义为可以正常工作的百分比，但是我需要将其设置为固定值。有人可以帮忙吗？

Answer 1

不幸的是，浏览器缩放功能与您编写的任何CSS代码都大相径庭-无法解决CSS中的缩放级别或对其进行调整。

您需要实现一个javascript解决方案，以首先检测缩放级别，然后实现一种修改CSS值以解决此问题的方法。这是一种检测浏览器缩放级别的方法： https://gist.github.com/kevingessner/5598913

如果您在线搜索，有几种方法可以完成此操作。我会进行研究，以找出最适合您的用例的方法，但是据我所知，您将不得不使用一些JavaScript来用纯CSS做到这一点。