在 HTML 中设置标题以响应

Question

我有一张 HTML 卡片，它在手机尺寸中的响应不正确

这里是html：

        <div class="col py-2">
          <div class="card education-card mirror-face">
            <div class="card-body">
              <div>
                <img style="float:left" class="competence-img " alt="logo" src="{{experience.experience_image.url}}"/>
                <h6 style="float: left;padding-top: 17px;" class="education-card-title">{{experience.employer}}</h6>
              </div>
              <h6 style="display: block;" class="education-card-title">{{experience.title}}</h6>
              <div>
              <p class="education-card-desc">{{experience.description}}</p>
              </div>
            </div>
          </div>

这是css

.education-card-title {
  color: var(--scolor);
  font-size: 20px;
  font-weight: 500;
}
.education-card-desc {
  color: var(--color);
  font-size: 14px;
  font-weight: 300;
}

这就是我的意思：

我的目标是这样：

Answer 1

您可以使用媒体查询来调整移动设备上的字体大小。并根据您的需要调整标题。

@media only screen and (max-width: 600px) {
  .title-font-size{
    font-size:12px;
  }
}