Question

我正在制作一个带有一些“奇特”效果的网站，但是每当我缩小地图时，一切都会变得不合适。有没有不使用媒体查询就可以解决此问题的方法？我在理解相对位置和绝对位置时遇到麻烦。我已经研究了一段时间，但是无论我尝试什么，它似乎都行不通。

现在一切看起来都不合适，但要点是您应该能够将太阳悬停，然后效果就会开始。但是，如果缩小，它就不会保留在原处。

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

您必须在头部添加meta标签。

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

Answer 2

了解职位职位非常重要

要获得一个更具响应性的网站，请使用尽可能多的相对位置。

这是{@ 3}}职位的指南

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

ps，是否使您的网站具有响应能力？，请考虑使用引导程序：https://www.w3schools.com/css/css_positioning.asp

Answer 3

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

<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

如何确保缩小后的网站仍能响应？

3 个答案: