我使用 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>我实际上希望当我调整窗口大小时，水平线应该与全窗口甚至小断点时显示的一样。
最佳答案
您好，欢迎来到 Stackoverflow。尝试查看此站点，您可以在其中阅读有关 vw 和 vh 的信息，它们是响应屏幕大小的单位:)
关于html - 如何使 <hr> 标签响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55770160/