时间戳

首页 > 解决方案 > 放大时将文本放入容器

html - 放大时将文本放入容器

问题描述

我正在尝试建立一个响应式网站，一切都很好，除了那个云中的文字说“嘿！......”如下图所示当我不缩放时没关系我喜欢这种行为

在此处输入图像描述

但是当我放大时，我最终会遇到这种丑陋的行为

在此处输入图像描述

我不知道如何解决这个问题我试图将机器人图像的整个单元、说话的云和文本放在 a中div，并将位置relative应用于其中，div并将位置absolute应用于其中的所有项目，但它没有t工作，请任何解决方案，并提前谢谢你

这是我的代码：

  .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__link {
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #ffffcc;
  }

  .text {
    font-family: Roboto;
    font-weight: bold;
    font-size: 20px;
    color: #ffffcc;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  .name {
    font-size: 1rem;
    display: block;
    animation-name: moveInLeft;
    animation-duration: 2s;
  }

.vector-1{
  position:  relative;
  height: 37vh;

}
  .img-dialogue {
    width: 60%;
        position: absolute;
        left: 20%;
        bottom: 57%;
        z-index: -1;
  }

  .dialogue {
    font-family: Roboto;
    color: #33cccc;
    position: absolute;
    top: 24px;
    left: 55px;
    display: inline-block;
  }

  .img-header {
    width: 60%;
    position: absolute;
    bottom: 9px;
  }
<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">
  <h1 class="big-heading"><span class="name">M.Amine Elwere</span> Front-end <br /> 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>

标签： htmlcss

解决方案

我认为您的问题源于缺少设置的字体大小。当浏览器渲染您的字体时，它会将其渲染为大致浏览器的大小。我建议，如果文本由您定位而不是图像，则使用值 vw 或 vh。这些对于响应式设计非常有用，并且由类似于百分比的浏览器大小启动。然后尝试使用 vw 或 vh 来调整你的字体大小和位置，你应该很好去！这是 CSS-Tricks 关于视口单元的文章 - https://css-tricks.com/fun-viewport-units/

推荐阅读