如何防止身体离开屏幕？

Question

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

另外，请随时指出我的代码中的任何缺陷/问题。 我是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> &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>

Answer 1

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

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

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

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

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

根据您的喜好调整两个值。 您也可以在@media使用min-width或width ，并根据需要放置尽可能多的媒体查询。

Answer 2

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

Answer 3

尝试使用媒体查询来使身体响应，您可以使用媒体查询生成器

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 个解决方案

解决方案1
2 已采纳 2016-11-04 02:12:31

解决方案2
0 2016-11-04 01:49:02

解决方案3
0

解决方案4
0 2016-11-04 01:55:45

如何防止身体离开屏幕？

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-11-04 02:12:31

解决方案2 0 2016-11-04 01:49:02

解决方案3 0

解决方案4 0 2016-11-04 01:55:45

解决方案1
2 已采纳 2016-11-04 02:12:31

解决方案2
0 2016-11-04 01:49:02

解决方案3
0

解决方案4
0 2016-11-04 01:55:45