我正在为自己制作一个简单的网站。当我在浏览器中打开网站并减小浏览器的水平宽度时，正文/白色矩形将从屏幕上消失。我该如何防止这种情况发生？
此外，请随时指出我的代码中的任何缺陷/问题。我是 Web 开发的新手，需要尽可能多的批评。
html {
background-image: url("bg.jpg");
padding: 150px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
h1 {
line-height: 15px;
text-align: center;
font-weight: 600;
color: rgba(61, 61, 61, 0.7);
}
h3 {
line-height: 0px;
text-align: center;
font-weight: 100;
color: rgba(61, 61, 61, 0.7);
}
hr {
border: 0;
color: red;
border-bottom: 1px solid rgba(168, 168, 168, 0.92);
width: 320px;
}
p {
text-align: center;
}
body {
padding: 25px;
max-width: 400px;
min-width: 400px;
height: 200px;
font-family: "Courier New", Courier, monospace;
background: #fafafa;
margin: auto;
border-radius: 3px;
box-shadow: 0px 0px 90px rgba(58, 58, 58, 0.71);
opacity: 0.95;
position: static;
}
footer {
margin-top: 45px;
opacity: 0.5;
}<html lang="en">
<head>
<meta charset="utf 8" />
<title>JOSH BAKOS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>JOSH BAKOS</h1>
<h3>STUDENT</h3>
</header>
<hr>
<p>I am a Java developer and a future Software Engineering Student @ UOIT.</p>
<p>
<br><a href="https://twitter.com/jzbakos" target="_blank">Twitter</a> • <a href="http://stackoverflow.com/users/6383960/jzbakos" target="_blank">StackOverflow</a> • <a href="https://github.com/jzbakos" target="_blank">Github</a>
</p>
<footer>
<p>© Josh Bakos</p>
</footer>
</body>
</html>最佳答案
在您的特定示例中，无需使用媒体查询使事情复杂化。这里的解决方案非常简单。
首先，将 html 中的 padding: 150px; 改为 padding-top: 150px;。当您使用 padding 而不是 padding-top 时，此属性会在您的 body 周围创建空间，当窗口太小时会将其推出屏幕。
最后，从正文中删除 min-width: 400px; 属性或使其小于 max-width。 min-width: 400px; 是阻止您的 body 调整到窗口大小的属性。
我个人对此的建议:媒体查询对于您的网页可能仍然有用。如果您希望在较小的分辨率下缩小主体元素和窗口顶 Angular 之间的垂直空间，您可以在样式表的末尾添加如下内容:
@media ( max-width: 767px ) {
html {
padding-top: 20px;
}
}
根据您的喜好调整这两个值。您还可以在 @media 中使用 min-width 或 width 并根据需要放置任意数量的媒体查询。
关于html - 如何防止 body 离开屏幕？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40414065/