如何让路径形状中的线条实现响应式适配？

我用代码实现了一组路径线条，在2K及全高清分辨率下显示正常，但在其他尺寸的设备（更小或更大）中无法做到响应式适配。想优化现有代码实现响应式，或者找更高效的实现方式。期望实现的形状是：横向短线条居中，中间垂直向下延伸一段，同时横向线条右端向上、向下各延伸一段的结构。

原代码 #

CSS #

.line {
  display: flex;
  align-items: center;
}
.line span:first-child {
  white-space: nowrap;
}
.line b {
  flex: 1 0 0;
  height: 5px;
  background: black;
  margin: 0 5px;
  min-width: 25px;
}
.line1 {
  position: absolute;
  width: 5.2%;
  left: 36.2vw;
  top: 31.9%;
}
.line2 {
  position: absolute;
  width: 15%;
  left: 40vw;
  top: 20%;
}

.line3 {
  position: absolute;
  width: 15%;
  left: 40vw;
  top: 45%;
}

.line4 {
  position: absolute;
  width: 26.1vh;
  left: 33.5%;
  top: 32.5%;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

HTML #

<p class="line line1"><span></span><b></b>
<p class="line line2"><span></span><b></b>
<p class="line line3"><span></span><b></b>
<p class="line line4"><span></span><b></b>

优化方案 #

方案一：改进现有CSS实现响应式 #

原代码核心问题是混用vw和vh单位，旋转元素的定位逻辑在不同宽高比屏幕下会错位，且冗余的flex结构完全没必要。优化后：

• 统一用vw单位作为尺寸和定位基准，保证不同屏幕宽度下比例一致
• 去掉无用的flex和空span，直接用单个元素做线条
• 调整旋转元素的transform-origin，避免旋转后位置偏移

优化后的代码：

/* 基础线条样式 */
.line {
  position: absolute;
  height: 5px;
  background: black;
}

/* 横向短线条 */
.line1 {
  width: 5.2vw;
  left: 36.2vw;
  top: 31.9vh;
}

/* 右上线条 */
.line2 {
  width: 15vw;
  left: 40vw;
  top: 20vh;
  /* 若原形状是斜向，可添加旋转并设置原点：
  transform: rotate(-30deg);
  transform-origin: left center; */
}

/* 右下线条 */
.line3 {
  width: 15vw;
  left: 40vw;
  top: 45vh;
  /* 若原形状是斜向，可添加旋转并设置原点：
  transform: rotate(30deg);
  transform-origin: left center; */
}

/* 垂直线条 */
.line4 {
  width: 18vw; /* 替换原vh单位，用vw保证比例 */
  left: 36.2vw; /* 和line1左对齐 */
  top: 31.9vh;
  transform: rotate(90deg);
  transform-origin: left top; /* 以左上角为旋转原点，避免偏移 */
}

<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>

方案二：用SVG实现（更高效、更稳定） #

SVG是矢量图形，天生支持响应式，代码更简洁，无需担心不同屏幕的适配问题，推荐优先使用：

<svg viewBox="0 0 100 100" width="100%" height="100vh" xmlns="http://www.w3.org/2000/svg">
  <!-- 横向短线条 -->
  <line x1="36.2" y1="31.9" x2="41.4" y2="31.9" stroke="black" stroke-width="0.5" />
  <!-- 右上线条 -->
  <line x1="40" y1="20" x2="55" y2="20" stroke="black" stroke-width="0.5" />
  <!-- 右下线条 -->
  <line x1="40" y1="45" x2="55" y2="45" stroke="black" stroke-width="0.5" />
  <!-- 垂直线条 -->
  <line x1="36.2" y1="31.9" x2="36.2" y2="50" stroke="black" stroke-width="0.5" />
</svg>

说明：

• viewBox="0 0 100 100" 将SVG画布分成100x100网格，和原代码的百分比比例对应，调整坐标即可匹配原形状
• width="100%" height="100vh" 让SVG占满视口，自动缩放
• 直接修改stroke-width可调整线条粗细，修改坐标可调整线条位置和长度

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