调整文本大小有问题

Question

我刚刚开始一个项目，到目前为止我已经添加了 header 和文本。我已经让 header 正确调整大小，但我正在努力让文本和副标题这样做。

我希望文本能够顺利调整大小，但不确定如何进行调整。我尝试使用媒体查询，但它并不是很有效。不太确定如何解决此问题，我们将不胜感激。

代码笔：https://codepen.io/Ayanfe/pen/oNoqoaR

HTML

<div class="container">
    <div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
  <div class="glow">Ayanfe Sanusi</div>
  <hr class="solid">
  <p class="subtitle">ILLUSTRATOR & CODER</p>
  </div>
  <div class="scanlines"></div>
</div>

CSS

.container {
     position: absolute;
     transform: translate(-50%, -50%);
     margin-top: 50%;
     left: 50%;
     width: 100%;
    

}
 .glitch, .glow {
     color: #dfbfbf;
     position: absolute;
     font-size: 12rem;
     animation: glitch 5s 5s infinite;
     font-family: "Oswald", sans-serif;
     font-style: italic;
     font-weight: 200px;
     margin-top: -28.5%;
     left: 6%;
     width: 100%;
     text-size-adjust: auto;


}
 .glitch::before, .glow::before {
     content: attr(data-text);
     position: absolute;
     left: 0;
     text-shadow: -8px 0 magenta;
     background: none;
     overflow: hidden;
     top: 0;
     animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
}
 .glitch::after, .glow::after {
     content: attr(data-text);
     position: absolute;
     left: 0px;
     text-shadow: -5px 0 lightgreen;
     background: none;
     overflow: hidden;
     top: 0;
     animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
}
 @keyframes glitch {
     1% {
         transform: rotateX(10deg) skewX(90deg);
    }
     2% {
         transform: rotateX(0deg) skewX(0deg);
    }

}
 .scanlines {
     overflow: hidden;
     mix-blend-mode: difference;
}
}
 .scanlines::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
     animation: fudge 7s ease-in-out alternate infinite;
}
 @keyframes fudge {
     from {
         transform: translate(0px, 0px);
    }
     to {
         transform: translate(0px, 2%);
    }
}

.solid {
    width: 50%;
    position: relative;
    color: rgba(165, 141, 141, 1);
    opacity: 0.3;
   margin-top: -12.5%;
    left: 7%;
}
 .subtitle {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-size: 1rem;
     color: rgba(165, 141, 141, 1);
     text-transform: uppercase;
     letter-spacing: 1em;
     position: relative;
     margin-top: -0.6%;
     right: -58%;
     animation: glitch-2 5s 5.02s infinite;
}

Answer 1

rem 是基于 html 字体样式的字体静态大小。例如，如果 html 字体大小设置为 18px，将元素的字体大小设置为 2rem 将导致字体大小为 36px（无论页面宽度如何）。

为了实现您想要的效果，您应该使用 vw，它根据视图宽度设置大小，将标题设置为 10.35vw，将副标题设置为 0.85vw 应该可以解决问题

Answer 2

GIF Example

HTML

    <div class=nav> 
      <header>
        <a href="#" class="logo">[Ayanfe Sanusi]</a>
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </header>
    </div>
    <div class="container">
      <div class="glitch" data-text="Ayanfe Sanusi">Ayanfe Sanusi</div>
      <div class="sub-container">
        <div class="solid"></div>
        <p class="subtitle">ILLUSTRATOR & CODER</p>
      </div>
      <div class="scanlines"></div>
    </div>

CSS

@font-face {
    font-family: 'montsserat';
    src: url(fonts/Montserrat-SemiBold.ttf);
    font-weight: 100;
    font-style: SemiBold;
}

@font-face {
    font-family: 'montsseratR';
    src: url(fonts/Montserrat-Regular.ttf);
    font-weight: 100;
    font-style: Regular;
}

@font-face {
    font-family: 'montsseratM';
    src: url(fonts/Montserrat-Medium.ttf);
    font-weight: 100;
    font-style: Regular;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;

}

body {
   background-image: linear-gradient(to right, #0c0427, #0d0427, #0d0427, #0e0327, #0e0327, #11082f, #130c36, #160e3e, #1f1150, #2a1463, #371575, #451488);
   padding: 0;
   margin: 0;
   height: 100%;
   width: 100%;
   display: flex;
   min-height: 100vh;
   overscroll-behavior: none;
   -webkit-animation: fadeIn 2s;
          animation: fadeIn 2s;
   animation-delay: 0s;
overflow-x: hidden;
cursor: url(Cursors/3.png), auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.875rem 6.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 1px;
    cursor: url(Cursors/3.png), auto;
}

.logo {
    position: relative;
    left: -50px;
    letter-spacing: 1px;
    cursor: url(Cursors/3.png), auto;
}

header .logo {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.563rem;
    text-transform: uppercase;
    letter-spacing: 0.313rem;
     font-family: 'Montserrat', sans-serif;
    cursor: url(Cursors/3.png), auto;
  

}

.logo:hover{
   pointer-events: none;
   border: none;
   box-shadow: none;
   background: transparent;
   cursor: url(Cursors/3.png), auto;
}
header ul{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: montsseratR;
    font-size: 0.9rem;
    text-transform: none;
    cursor: url(Cursors/3.png), auto;

}

header ul li {
    list-style: none;
    margin-left: 1.25rem;
    font-family: montsseratR;
    font-size: 0.9rem;
    text-transform: none;
    cursor: url(Cursors/3.png), auto;

}

header ul li a {
     text-decoration: none;
     padding: 0.375rem 0.938rem;
     color: #fff;
     border-radius: 1.25rem;
     font-family: 'Montserrat', sans-serif;
     font-size: 0.9rem;
     text-transform: none;
     position: sticky;
     opacity: 0.5;
     text-transform: uppercase;
     cursor: url(Cursors/3.png), auto;
}


header ul li a.active {
   color: #fff;
   opacity: 1;
    font-family: 'Montserrat', sans-serif;
   cursor: url(Cursors/3.png), auto;

}
header ul li a:hover {
    color: #fff;
    opacity: 1;
     font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    position: sticky;
    border: none;
    box-shadow: none;
    transition-delay: 0s;
    text-transform: uppercase;
    z-index: 20000;
    cursor: url(Cursors/3.png), auto;
}

 .container {
    display: flex;
    flex-direction: column;
    margin-top: 15rem;
    margin-left: 5%;
    width: 100%;
    margin-bottom: 5%;
}

 .glitch {
     color: #dfbfbf;
     font-size: 9rem;
     font-family: "Oswald", sans-serif;
     font-style: italic;
     text-shadow: -5px 0 lightgreen, -8px 0 magenta;
     animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite;
     margin-left: 2%;
}
 @keyframes glitch {
     1% {
         transform: rotateX(10deg) skewX(90deg);
    }
     2% {
         transform: rotateX(0deg) skewX(0deg);
    }

}

.sub-container{
    display: flex;
    flex-direction: row;
}
.scanlines {
     overflow: hidden;
     mix-blend-mode: difference;
}
 .scanlines::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background: repeating-linear-gradient(to bottom, transparent 0%, 
 rgba(255, 255, 255, 0.05) 0.5%, transparent 1%);
     animation: fudge 7s ease-in-out alternate infinite;
}
@keyframes fudge {
     from {
         transform: translate(0px, 0px);
    }
     to {
         transform: translate(0px, 2%);
    }
}

.solid {
    width: 50%;
    margin-top: 0.5rem;
    height: 1.5px;
    background-color: rgba(165, 141, 141, 1);
    opacity: 0.3;
    margin-left: 3%;
    margin-right: 1.5%;
}
 .subtitle {
     font-family: Arial, Helvetica, sans-serif;
     font-weight: 100;
     font-size: 1rem;
     color: rgba(165, 141, 141, 1);
     text-transform: uppercase;
     letter-spacing: 1em;
     right: -58%;
     animation: glitch-2 5s 5.02s infinite;
}
@keyframes glitch-2 {
     1% {
         transform: rotateX(10deg) skewX(70deg);
    }
     2% {
         transform: rotateX(0deg) skewX(0deg);
    }
}

调整文本大小有问题

Having problems with resizing text

html

javascript

css

text

resize