如何确保网站在缩小时仍然响应？

Question

我正在制作一个带有一些 "fancy" 效果的网站，但每当我缩小时，一切都变得不对劲。有什么方法可以在不使用媒体查询的情况下解决这个问题吗？我无法理解相对位置和绝对位置。我研究了一段时间，但无论我尝试什么，似乎都行不通。

现在一切看起来都不对劲，但关键是你应该能够悬停在太阳上，然后效果就会开始。但是，如果你缩小它不会留在原地。

body {
  margin: 0;
  background-color: #d37421;
}

#container {
  position: relative;
}


/* bakgrunn */

#siluette {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#slott {
  position: fixed;
  bottom: 0px;
  left: 600px;
  width: auto;
  height: 500px;
}


/* dør */

#dor {
  position: absolute;
  left: 817px;
  background-color: black;
  width: 46px;
  height: 65px;
  top: 632px;
  opacity: 0;
}

#dor:hover {
  opacity: 0.2;
}


/* måne*/

#maane {
  position: fixed;
  width: 180px;
  height: 180px;
  background-color: rgb(221, 22, 22);
  top: 60px;
  right: 100px;
  border-radius: 50%;
  transition: 3s;
}

#maane:hover {
  background-color: yellow;
}


/* vinduer */

#vindu1 {
  position: absolute;
  background-color: black;
  left: 650px;
  top: 565px;
  height: 200px;
  width: 380px;
  z-index: -2;
}

#vindu2 {
  position: absolute;
  background-color: black;
  left: 790px;
  top: 450px;
  height: 55px;
  width: 100px;
  z-index: -1;
}

#maane:hover~#vindu1 {
  position: absolute;
  background-color: yellow;
  transition: 1s;
}

#maane:hover~#vindu2 {
  position: absolute;
  background-color: yellow;
  transition: 1s;
}


/* tekst */

#tekst {
  position: absolute;
  top: 666px;
  left: 666px;
  color: orange;
  text-align: center;
  font-size: 42px;
  font-family: luminari, baskerville, sans-serif;
}


/* drakula */

#drakula {
  position: absolute;
  width: 120px;
  top: 520px;
  left: 635px;
  z-index: -20;
}

#maane:hover~#drakula {
  position: absolute;
  top: 330px;
  transition: 1s;
}

<html>

<head>
  <link rel="stylesheet" href="side1.css" ;>
</head>

<body>
  <div id="container">

    <!-- bakgrunn -->
    <img id="slott" src="https://uploads.codesandbox.io/uploads/user/aa69e076-b797-4e7e-bcb7-5361856ae103/LWD8-castlemod.png" height="600px">
    <img id="siluette" src="https://uploads.codesandbox.io/uploads/user/566a27be-83e1-4eee-a368-4640077fe5d5/0xb9-bakgrunn1.png">

    <!-- dør -->
    <a href="side2.html">
      <div id="dor"></div>
    </a>

    <!-- måne -->
    <div id="maane"></div>

    <!-- vinduer -->
    <div id="vindu1"></div>
    <div id="vindu2"></div>

    <!-- tekst -->
    <p id="tekst">Trykk på døren din djevel</p>

    <!-- drakula -->
    <img id=drakula src="https://uploads.codesandbox.io/uploads/user/566a27be-83e1-4eee-a368-4640077fe5d5/4Bkm-dracula.png">
  </div>

</body>

</html>

Answer 1

你必须在 head 中添加 meta 标签。

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

Answer 2

了解职位的作用非常重要，

要获得响应速度更快的网站，请使用尽可能多的相对位置。

这是位置指南，https://www.w3schools.com/css/css_positioning.asp

希望本指南能帮助您更好地了解职位，

ps，让您的网站响应？考虑使用 bootstrap：https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

Answer 3

使用 bootstrap class 进行响应... 喜欢：

<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">



        </div>
    </div>
</div>

并尝试从 :

中了解更多

https://getbootstrap.com

https://bootswatch.com

如何确保网站在缩小时仍然响应？

How to make sure a website is still responsive when zoomed out?

html

css

position

zooming

responsive