时间戳

首页 > 解决方案 > 如何确保网站在缩小时仍然响应？

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

问题描述

我正在制作一个具有一些“奇特”效果的网站，但每当我缩小时，一切都会变得不合适。有什么方法可以在不使用媒体查询的情况下解决这个问题？我无法理解相对位置和绝对位置。我已经研究了一段时间，但无论我尝试什么，它似乎都不起作用。

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

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>

标签： htmlcsspositionzoomingresponsive

解决方案

您必须在头部添加元标记。

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

推荐阅读