当我缩小和放大时，网站布局变得疯狂答案

【问题标题】：website layout going crazy when I zoom out and in当我缩小和放大时，网站布局变得疯狂
【发布时间】：2017-05-15 18:14:41
【问题描述】：

我知道为什么，但是当我缩小我的网站时，代码似乎崩溃了，整个事情看起来很恶心。我查看了这个问题的其他答案，但没有一个解决方案真正适合我的代码。

body {
  background-image: url(gradient.png);
  background-repeat: no-repeat`enter code here`;
}

h1.heading {
  color: #046289;
  font-size: 50px;
  margin-top: 100px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

p.heading {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-size: 20.8px;
  font-weight: 600;
  position: relative;
  margin-left: 70px;
  top: 60px;
}

p.heading1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: relative;
  margin-left: 70px;
  top: 50px;
}

img.aml {
  width: 280px;
  height: 280px;
  position: absolute;
  margin-left: 360px;
  bottom: 30px;
}

iframe.livevid {
  position: absolute;
  margin-left: 840px;
}

p.vid {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-size: 20.8px;
  font-weight: 600;
  position: absolute;
  margin-left: 840px;
  top: 307px;
}

p.vid1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: absolute;
  margin-left: 840px;
  top: 353px;
}

a {
  text-decoration: none;
}

p a:link {
  color: #4204a5;
}

p a:visited {
  color: #4204a5;
}

p a:hover {
  color: #71a3f2;
}


/*
	BELOW - NAVIGATION BAR
	*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
}

li {
  float: left;
}

.spacefornav {
  margin-left: 462px;
}

li a:hover {
  color: #71a3f2;
}

div.nav {
  color: #046289;
}

li a {
  display: inline-block;
  color: #046289;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-family: 'Poppins';
  sans-serif;
  margin: 0px 20px;
  font-weight: 500;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Childish Gambino</title>



  <meta charset="UTF-8">
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&amp;subset=devanagari,latin-ext" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

<body>
  <h1 class="heading">CHILDISH GAMBINO</h1>
  <ul>
    <div class="nav">
      <li class="spacefornav"><a href="home.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="music.html">Music</a></li>
      <li><a href="contact.html">Contact</a></li>
    </div>
  </ul>
  <p class="heading">"AWAKEN MY LOVE!"</p>
  <p class="heading1">
    Childish Gambino's latest
    <br> and freshest album is
    <br> AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
    <br>
    <a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
  </p>
  <img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art">
  <<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
    <p class="vid">Watch Now!</p>
    <p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>

【问题讨论】：

简单的回答，您的网站没有响应，我建议您阅读：w3schools.com/html/html_responsive.asp
HTML Website Going Crazy when Zoomed out的可能重复

标签： html css layout

【解决方案1】：

如果您使用一些完全适合其他 DIV 的内联 DIV，则可能会发生此问题。当放大/缩小像素被分割。如果你给 DIV 的 一个额外的像素空间，它是固定的。

【讨论】：

我该怎么做呢？
例如将 .spacefornav {margin-left: 462px;} 更改为 461px
所以它们都应该是奇数，这样像素就不能被除了吧？/??
不完全...只是使位置不依赖于 1 个像素。例如：如果你有一个 400 像素的容器，并且你想要两个内联 div。让它们每个 199。
所以你能从我的网站上给我一个例子，说明我应该如何去做。喜欢我的代码