html - 使 img 在所有设备上响应

Question

我正在尝试制作一个响应式网页，但不知何故，我正在为机器人的图像和消息而苦苦挣扎，让我向您展示我在说什么

你在这里看到的是 Galaxy S5 上的 View ，非常好

但问题是当我切换到像素 2 时，例如，消息翻译了一点点到顶部，如下所示:

如果我转移到任何其他设备，它也是同样的问题。在某些设备上，它看起来很漂亮，而在某些设备上，它完全转换为顶部。我尝试了针对不同设备的媒体查询，但我发现自己做了很多，我认为这不是最佳做法。请提供任何最佳解决方案，并提前感谢您。

这是我的代码片段:https://codepen.io/Amoocris/pen/vPWOpX

HTML

<div class="header-box">
<ul class="main-nav">
  <li class="main-nav__items"><a class="main-nav__link" href="#">About</a></li>
  <li class="main-nav__items"><a class="main-nav__link" href="#">Projects</a></li>
  <li class="main-nav__items"><a class="main-nav__link" href="#">Contact</a></li>
</ul>
<div class="text">
  <h3 class="name">M.Amine Elwere</h3>
  <h1 class="big-heading">Front-end</h1>
  <h1 class="big-heading-2">Web developer</h1>
</div>
<div class="vector-1">
  <img src="../vector/Png for the web/header minou.png" data-aos="fade-up" class="img-header" alt="">
  <img src="../vector/Png for the web/png-dialogue-2.png"  data-aos="fade-right" data-aos-duration="4000" class="img-dialogue" alt="">
  <h1 class="dialogue"  data-aos="fade-up" data-aos-duration="5000">HEYY!...</h1>
</div>

</div>

CSS

 @media (max-width: 480px) {
   * {
     margin: 0;
     padding: 0;
   }

   body {
     font-family: Roboto;
     color: #33cccc;
     background-color: #ffffcc;
   }

   .header-box {
     width: 100vw;
     height: 90vh;
     background-color: #33cccc;
     -webkit-clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
     clip-path: polygon(0 0, 100% 0%, 100% 76%, 0% 100%);
     position: relative;
   }

   .main-nav {
     display: flex;
     list-style-type: none;
     justify-content: space-around;
     width: 100vw;
     text-align: right;
   }

   .main-nav__items {
     text-decoration: none;
   }

   .main-nav__link {
     text-decoration: none;
     font-family: 'Roboto', sans-serif;
     font-weight: bold;
     color: #ffffcc;
   }

   .name {
     font-family: Roboto;
     text-align: center;
     position: absolute;
     top: -7%;
     left: 3%;
     font-size: 1rem;
   }

   .text {
     font-family: Roboto;
     font-weight: bold;
     font-size: 2rem;
     color: #ffffcc;
     position: absolute;
     left: 50%;
     top: 40%;
     transform: translate(-50%, -50%);
   }

   .img-header {
     width: 30%;
     height: auto;
     position: absolute;
     bottom: 0px;
   }

   .img-dialogue {
     position: absolute;
     bottom: 7rem;
     left: 2rem;
   }

/* .vector-1{
  position: relative;
  bottom: 0;
} */

   .dialogue {
     position: absolute;
     font-family: inherit;
     color: inherit;
     bottom: 24%;
     left: 17%;
   }

.big-heading-2{
  margin-top: 10px;
  font-size: 3rem;
  animation-name: moveInLeft;
  animation-duration: 1.5s
}

.big-heading{
  font-size: 3rem;
  animation-name: moveInRight;
  animation-duration: 1.5s;
}


 }

Answer 1

您是否尝试过使 .vector-1 div 位置相对。这样，.dialogue 类将使用父 div 而不是网页定位。如果您尝试这样做，您应该更改 .dialogue 类的位置。

顺便说一句。您不应在网页上使用超过 1 个 h1。 h1 元素是页面的标题，所以你应该只使用它一次:)

如果有其他问题，请告诉我