html - 更改不同分辨率的文本大小

Question

我的背景随着浏览器的不同分辨率而变化。这是完美的工作。然后是js中输入的文字。我也想用不同分辨率的浏览器更改该文本的大小。

你知道怎么做吗？

正常尺寸：

小尺寸：

.wrap-hero-content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero-content {
  position: absolute;
  text-align: center;
  min-width: 110px;
  left: 50%;
  top: 58%;
  padding: 65px;
  outline-offset: 8px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

<div class="wrap-hero-content">
  <div class="hero-content">
    <span class="typed"></span>
  </div>
</div>

标签： htmlcssresponsive-design

Answer 1

你将不得不使用这样的东西：

@media screen and (max-width : 320px)
{
  .your_text
  {
    font:10px;
  }
}
@media screen and (max-width : 1204px)
{
  .your_text
  {
    font:16px;
  }
}