时间戳

首页 > 解决方案 > 即使我最小化屏幕，如何在 HTML/CSS 中绝对修复文本

html - 即使我最小化屏幕，如何在 HTML/CSS 中绝对修复文本

问题描述

所以现在我正在尝试应用我在 Front Web Development 中学到的知识，但我遇到了一个问题，即文本在较小的视口中没有保持应有的方式。

在此处输入图像描述

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>

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

标签： htmlcss

解决方案

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

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

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

推荐阅读