如何使 <hr> 标签响应？答案

【问题标题】：How to make <hr> tag responsive?如何使 <hr> 标签响应？
【发布时间】：2019-09-10 05:10:24
【问题描述】：

我使用 html css 和 bootstrap 创建了一个页面。我遇到了水平线标签的问题。当窗口大小变为超小时需要帮助解决此问题

当我给 hr 标签设置 400px 时，它在全屏中运行良好，但是当屏幕尺寸减小到低于 500px 的移动尺寸时，它看起来不太好，所以我尝试使用 90% 的宽度，然后它可以很好地用于额外的小屏幕，但是当屏幕很小或更高时，它会占用更多的水平空间，这是我不想要的。

body {
  color: white;
  font-family: Lato;
  background: url(purrfectimage.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

#content {
  text-align: center;
  padding-top: 25%;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

hr {
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

html {
  height: 100%;
  width: 100%;
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255, 255, 255);
}

<!DOCTYPE html>
<html>

<head>

  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no;">

  <title>Purrfect Match</title>

  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <link rel="stylesheet" href="
    https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" type="text/css" href="purr.css">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div id="content">
          <h1>Purrfect Match</h1>
          <h3>The Only Human-Feline Dating App</h3>
          <hr>
          <button type="button" class="btn btn-light btn-lg"><i class="fa fa-paw" aria-hidden="true"></i> Get Started!</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

我实际上希望当我调整窗口大小时，水平线应该与全窗口甚至小断点显示的一样。

【问题讨论】：

像素值不会响应......另外，你的问题很模糊。我会查看media queries，以及百分比单位/大众单位。
只需将 width: 400px; 更改为 width:60% 或任何您想要的内容

标签： html css responsive-design bootstrap-4

【解决方案1】：

您好，欢迎来到 Stackoverflow。试着看看这个网站，在那里你可以了解vw 和vh，它们是响应屏幕大小的单位:)

https://www.w3schools.com/CSSref/css_units.asp

【讨论】：