Question

我正在为自己制作一个简单的网站。当我在浏览器中打开网站并减小浏览器的水平宽度时，正文/白色矩形将离开屏幕。我该如何防止这种情况发生？

另外，请随意指出我的代码中的任何缺陷/问题。我是网络开发的新手，需要尽可能多的批评。

<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> &bull; <a href="http://stackoverflow.com/users/6383960/jzbakos" target="_blank">StackOverflow</a> &bull; <a href="https://github.com/jzbakos" target="_blank">Github</a>
  </p>

  <footer>
    <p>&copy; Josh Bakos</p>
  </footer>

</body>

</html>

comms_reliability

Answer 1

在特定示例中，无需使用媒体查询复杂化。这里的解决方案非常简单。

首先，在padding: 150px;中将padding-top: 150px;更改为html。当您使用padding代替padding-top时，此属性会在您的身体周围创建空间，当窗口太小时会将其推出屏幕。

最后，从正文中删除min-width: 400px;属性，或使其小于max-width。 min-width: 400px;是阻止您的身体适应窗口大小的属性。

我个人对此的建议：对于您的网页，媒体查询可能仍然有用。如果您希望在较小的分辨率下缩小主体元素和窗口顶部边角之间的垂直空间，可以在样式表的末尾添加类似的内容：

@media ( max-width: 767px ) { 
  html {
  padding-top: 20px;
  }
}

根据您的偏好调整两个值。您还可以在min-width中使用width或@media，并根据需要添加任意数量的媒体查询。

Answer 2

查看媒体查询：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

尝试使用media queries使身体响应，您可以使用媒体查询generator

Answer 4

尝试在https://jsfiddle.net/

进行此项检查

body {
  padding:25px;
  max-width: 400px;
  width:100%;
  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;
}

如何防止身体脱离屏幕？

4 个答案: