hr标签响应基于屏幕大小

Question

我使用了hr标签。我给hr标签宽30％。当我缩放我的屏幕时，hr标签的宽度保持不变。当我小的时候我的屏幕宽度保持不变。

但我想要基于页面大小的响应宽度。我能怎么做 ？？ 当我放大我希望hr标签的宽度也小。 我附上2张图片。首先是屏幕尺寸是100％，第二个是屏幕尺寸是50％ 我的HTML是：

        `<div class="home-page-image">
        <img src={{homePageImage}}/>
        <header>
        <h3>Refer & Earn</h3>
        <hr width="31%">
        <p>Introduce a friend and get rewarded</p>
        </header>
        </div>`

和scss是

 home-page-image {
  position: relative;
  text-align: center;
  img {
    height: 100%;
    width: 100%;
    filter: opacity(50%);
  }
  header {
    position: absolute;
    top: 25%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    h3 {
      font-size: 36px;
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      text-align: center;
      margin-bottom: -8px;
    }
    hr {
      border-style: inset;
      margin-top: 19px;
      margin-bottom: 11px;
      width: 31%;
    }
    p {
      font-size: 18px;
      font-family: 'Open Sans', sans-serif;
      color: #5D5C5D;
      font-style: normal;
    }
  }
}`

Answer 1

你可以发布更多代码吗？看起来您的hr标记嵌套为另一个具有指定宽度的元素中的子标记。这意味着给它一个30％的宽度将产生相对于所述父容器的宽度而不是屏幕宽度。

如果您需要快速修复，可以使用30vw，这可以为您提供所需的效果，但我不建议这样做。 您需要确保您的代码结构合理，以避免将来出现任何不必要的意外。