html - hr标签根据屏幕尺寸做出响应

我用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;
    }
  }
}`

最佳答案

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

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

关于html - hr标签根据屏幕尺寸做出响应，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46638494/