CSS中的自适应字体大小

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经使用 网格创建了一个站点。每个页面都有一个大的h1：

body {
  font-size: 100%
}
/* Headers */
h1 {
  font-size: 6.2em;
  font-weight: 500;
}
<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

当我将浏览器调整为移动大小时，大字体不会调整，并导致浏览器包含水平滚动条以适应大文本。

我注意到在 Typography示例页面上，标题在压缩和扩展时适应浏览器。

我是否真的缺少明显的东西？我该如何实现？

回答：

在font-

size调整浏览器窗口时，就不会这样回应。相反，它们会响应浏览器的缩放/类型大小设置，例如，当您在浏览器中同时按下键盘上的Ctrl和+时。

您将不得不考虑使用媒体查询来按一定的间隔减小字体大小，从而开始破坏设计并创建滚动条。

例如，尝试将其添加到底部的CSS内，在设计开始中断的任何地方更改320像素的宽度：

@media only screen and (max-width: 320px) {
   body { 
      font-size: 2em; 
   }
}

您还可以使用视口百分比长度，例如vw，vh，vmin和vmax。W3C的官方文档指出：

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

同样，可以从同一W3C文档中定义每个单独的单元，如下所示：

vw单位-等于初始包含块的宽度的1％。

vh单位-等于初始包含块的高度的1％。

vmin单位-等于vw或vh中的较小者。

vmax单位-等于vw或vh中的较大者。

它们的使用方式与任何其他CSS值完全相同：

.text {
  font-size: 3vw;
}
.other-text {
  font-size: 5vh;
}

兼容性是比较好的可以看出这里。但是，某些版本的InternetExplorer和Edge不支持vmax。此外，iOS 6和7的vh单元存在问题，已在iOS 8中修复。

以上是 CSS中的自适应字体大小 的全部内容， 来源链接： utcz.com/qa/430465.html

回到顶部