Как убедиться, что веб-сайт по-прежнему отзывчив при уменьшении масштаба? - PullRequest
Новая
       52

Как убедиться, что веб-сайт по-прежнему отзывчив при уменьшении масштаба?

0 голосов
/ 25 октября 2018

Я делаю сайт с некоторыми "причудливыми" эффектами, но всякий раз, когда я уменьшаю масштаб, все становится неуместным.Есть ли способы исправить это без использования медиа-запросов?У меня проблемы с пониманием положения относительного и абсолютного.Некоторое время я проводил исследования, но, что бы я ни пытался, это не сработало.

Теперь все выглядит неуместно, но дело в том, что вы должны парить на солнцеи тогда начнутся эффекты.Однако, если вы уменьшите масштаб, он не останется на месте. 

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>

Ответы [ 3 ]

0 голосов
/ 25 октября 2018

Чтобы узнать, какие позиции занимают действительно важно,

, чтобы получить более отзывчивый веб-сайт, пожалуйста, используйте как можно больше относительных позиций.

вот руководство по позициям, https://www.w3schools.com/css/css_positioning.asp

Я надеюсь, что это руководство поможет вам лучше понять позиции,

пс, что сделает ваш сайт отзывчивым ?, подумайте об использовании начальной загрузки: https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

0 голосов
/ 25 октября 2018

используйте класс начальной загрузки для отзывчивости ... как: 

<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

0 голосов
/ 25 октября 2018

Вы должны добавить метатег в голову. 

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