window 调整大小时如何让我的网站保留下来

Question

现在，当我调整网页大小时，整个网站都乱七八糟。我已经查找了解决方案，但它们对我没有用。我读到这可能是因为我将一些位置设置为绝对位置，我尝试将它们设置为相对位置，但这没有用。感谢您的帮助:)

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);

* {margin: 0; padding: 0;}

html { 
  background-color: black;
  opacity: .9;
  min-height:100%;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  z-index: 2000;
}

h1 {
  position: absolute;
  font-family: 'Passion One';
  font-size: 200px;
  color: blue;
  letter-spacing: 1.6rem;
  top: calc(62% - 200px);
  text-align: center;
  text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
  opacity: .8;
  width: 100%;
  z-index: 2001;
}

h2 {
  position: absolute;
  font-family: 'Open Sans', monospace;
  font-size: 26px;
  color: #6EBEDC;
  letter-spacing: .4rem ;
  top: calc(64% - 30px);
  text-align: center;
  opacity: .68 ;
  width: 100%;
  z-index: 2002;
}

h3 {
  position: absolute;
  font-family: 'Open Sans', monospace;
  font-size: 24px;
  color: #6EBEDC;
  letter-spacing: .4rem ;
  top: calc(38% - 30px);
  text-align: center;
  opacity: .68 ;
  width: 100%;
  z-index: 2003;
}

body {
  
}

footer {
    position: absolute;
    bottom: calc(22% - 100px);
    right: calc(16% - 125px);
    letter-spacing: .6rem;
    z-index: 2002;
}

.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
        position: relative;
        height: 106%;
        width: 100%;
        overflow: hidden;
        background: #000;
    }
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 102%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}

a {text-decoration: none;}

/* This class is added on scroll */
.fixed {
  position: fixed;
  top: 0;
  height: 70px;
  z-index: 1;
}

/* Navigation Settings */
nav {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #5B5B5B;
  opacity: .8;
  font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
}

nav:hover {
  opacity: .9;
}

nav li {
  display: inline-block;
  padding: 24px 24px;
}

nav li a:hover {
  color: black;
}

nav li a{
  color: white;
  text-transform: uppercase;
}

section {
  height: 100vh;
}

/* Screens Settings */
#screen1 {
  background: #1061E5;
  text-align: center;
}

#screen1 p {
  padding-top: 200px;
  text-align: center;
}

#screen2 {
  background: white;
  text-align: center;
}

#screen3 {
  background: black;
  text-align: center;
}

@media only screen and (max-width: 520px) {

  nav li {
    padding: 24px 4px;
  }

  nav li a {
    font-size: 16px;
  }

}

<!DOCTYPE html>
<html>

<head>

  <meta name = "viewport" content = "width = device-width, initial-scale=1">

  <script src = "jquery-3.1.1.min.js"></script>

  <script src = "script.js"></script>

  <link rel = "stylesheet" href="style.css">

  <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Passion+One|Source+Code+Pro" rel="stylesheet">

  <title> AL-SABA.net </title>

</head>

<body>

<header>
          <h3> Design • Code • Programs </h3>

          <h1> AL-SABA </h1>

          <h2> Personal Website </h2>
</header>

    <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>

    <div class = "homepage-hero-module">
    <div class = "video-container">
        <div class = "filter"></div>
        <video autoplay loop class = "fillWidth">
            <source src="coding.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
            <source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
        </video>
    </div>
</div>

<section id="screen1">

  <p>Scroll down</p>

  <nav class = "bar">
     <ul>
   <li class = "bar-home"><a href="#">Home</a></li>
        <li class = "bar-about"><a href="#">About</a></li>
        <li class = "bar-projects"><a href="#">Projects</a></li>
        <li class = "bar-contact"><a href="#">Contact</a></li>
     </ul>
  </nav>

</section>

<section id="screen2"></section>
<section id="screen3"></section>



<footer>
</footer>

</body>

</html>

Answer 1

看起来除了"Al-Saba" h1 其他都还好。您可以使用考虑视口宽度的相对值来声明字体大小。

改变你的 h1 CSS。做这个：font-size:200px; 类似于 font-size:15vw.

"Design • Code • Programs" 和 "Personal Website" 重叠 "Al-Saba"，因为它们都在同一个 div 中。试试这个：

<header>
         <div> <h3> Design • Code • Programs </h3></div>

         <div> <h1> AL-SABA </h1></div>

         <div> <h2> Personal Website </h2></div>
</header>

Answer 2

您可以调整位置。

例如，尝试调整标题元素的位置。可以看到很大的不同。

h1,h2,h3 {
position:static;
}

Answer 3

只需删除此元标记

<meta name = "viewport" content = "width = device-width, initial-scale=1">

window 调整大小时如何让我的网站保留下来

How can I make my website stay when window is resized

html

javascript

css

resize

web