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>

Answer 1

您将必须使用以下内容：

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

Answer 2

您可以使用CSS轻松做到这一点（您可以根据自己的需要使用最小宽度和字体大小：

 // default for less than 800px width
    .hero-content .typed {
         font-size:10px;
    }

@media (min-width: 800px) {
    .hero-content .typed {
         font-size:12px;
    }
}

@media (min-width: 1024px) {
    .hero-content .typed {
         font-size:14px;
    }
}

Answer 3

为所有设备创建特殊的字体大小

$html-font-size-lg: 16px;
$html-font-size-md: 15px;
$html-font-size-sm: 14px;
$html-font-size-xs: 13px;

$paragraph-font-size-lg: 18px;
$paragraph-font-size-md: 16px;
$paragraph-font-size-sm: 14px;
$paragraph-font-size-xs: 12px;

html {

    font-size: $html-font-size-lg;
    line-height: 23px;

    @media (max-width: 1024px) {
        font-size: $html-font-size-md;
    }

    @media (max-width: 640px) {
        font-size: $html-font-size-sm;
    }

    @media (max-width: 480px) {
        font-size: $html-font-size-xs;
    }

}

或使用em或rem作为响应字体大小 Em是可缩放的单位，等于文档中当前的字体大小。如果您没有默认设置字体大小，则浏览器会为您设置字体大小。浏览器的默认字体大小通常为16像素。因此默认情况下1em等于16px。如果您为文档设置字体大小14px，则1em等于14px，2em等于28px，0.5em等于7px，依此类推。建议的单位是em和rem，因为它们具有可扩展性和对移动设备的友好特性。

// body font size
$browser-context: 16;

// function to convert px to em
@function em($pixels, $context: $browser-context) {
    @return #{$pixels/$context}em
}

html {
    line-height: 1.2;
    font-size: em(16);
}

h1 {
    // 72px
    font-size: em(72);
}

h2 {
    // 24px
    font-size: em(24);
}

这是响应式印刷术的最佳做法。

更改不同分辨率的文字大小

3 个答案: