响应式CSS点阵背景

Question

我想知道以下是否可行：

点网格作为CSS背景，其中列宽响应但点总是保持相同的像素大小。

我已经使用linear-gradient模式实现了效果，但这些模式在某些视口宽度时不与flexbox网格对齐 - 可能是由于使用calc（）和vw单位进行像素舍入。

linear-gradient (Codepen)

我目前正在研究使用<svg>，但我面临的问题是当SVG缩放时，点也是如此（点应保持与缩放相同的像素大小）。

我担心我可能不得不求助于网格和点的HTML元素:(

Answer 1

为什么不使用psuedo元素在元素中添加点，并且就像你将永远留在元素数量的角落一样：

＆＃13;

＆＃13;

main {
  margin: 5px;
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

div {
  flex: 1 0 auto;
  height: 150px;
  background: red;
  position: relative;
}

div:before,
div:after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  right: -2px;
  width: 4px;
  background: linear-gradient(to bottom, #000 4px, transparent 4px, transparent calc(100% - 4px), #000 90%);
}

div:after {
  right: auto;
  left: -2px;
}

div:nth-child(even) {
  opacity: .5;
}

＆＃13;

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

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

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

＆＃13;

＆＃13;

＆＃13;