即使我最小化屏幕，如何完全修复 HTML/CSS 中的文本

Question

所以现在我正在尝试应用我在前端 Web 开发中学到的知识，但我遇到了这样的问题：文本在较小的视口中没有保持应有的状态。

body {
  font-family: "Roboto Condensed", sans-serif;
  margin: 0;
  background: #f2f2fc;
  color: #302e4d;
}

.about-section {
  position: absolute;
  max-width: 100%;
  top: 20%;
  left: 40%;
  transform: translate(-40%, -60%);
}

.about-me div {
  font-size: 40px;
  font-weight: bold;
}

.intro {
  font-size: 30px;
  padding-top: 50px;
  font-weight: bold;
}

.intro-stud {
  color: #E00;
}

.description {
  color: #504e70;
  font-size: 20px;
  font-weight: normal;
}

<div id="main-content">
  <section class="about-section">
    <div class="about-me">
      <div>About Me</div>
    </div>
    <div class="intro">
      <span class="intro-name">I'm Christian Wells Martin and</span>
      <span class="intro-stud">a Student</span>
      <p class="description">Hi! My name is Christian Wells Martin, a BSIT/BSCS student in _____ College/University, and currently studying web development, and this website is my first mini-project, and I hope you guys will like it!.</p>
    </div>
  </section>
</div>

欢迎提出建议，特别是如果我做了一些错误的做法。

Answer 1

有几种方法可以解决这个问题。

第一，你在绝对定位中使用了百分比。百分比将随着窗口大小的变化而变化。这可以产生不错的效果，但这似乎不是您想要的。如果您不希望文本做出响应，请尝试使用精确的像素值。 https://www.w3schools.com/cssref/pr_dim_width.asp

解决此问题的另一种更高级的方法是使用媒体查询。这些允许您根据屏幕的当前尺寸定义不同的 css 样式。 https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

.about-section{
display:grid;
grid-template-rows:auto, 1fr;
}

这应该可以解决你的问题。如果不是，请尝试这个：

.about-section{
display:flex;
flex-direction:column;
}

Answer 3

.about-section {position:absolute;max-width:100%;top:20%;left:40%;transform:translate(-40%,-60%);}避免position:absolute