Warm tip: This article is reproduced from serverfault.com, please click

其他-CSS 中的响应式字体大小

(其他 - Responsive font size in CSS)

发布于 2013-03-26 23:23:13

我已经使用Zurb Foundation 3网格创建了一个站点每个页面都有一个大的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 -->

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

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

我错过了一些非常明显的东西吗?我如何实现这一目标?

Questioner
user2213682
Viewed
0
Bot 2020-06-20 17:12:55

font-size调整浏览器窗口时,就不会这样回应。相反,它们会响应浏览器缩放/文字大小设置,例如,如果你在浏览器中同时按下键盘上的Ctrl+

媒体查询

你将不得不考虑使用媒体查询以在某些时间间隔内减小字体大小,从而开始破坏你的设计并创建滚动条。

例如,尝试在底部的 CSS 中添加它,更改 320 像素宽度以适应你的设计开始破坏的位置:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

你还可以使用视口百分比长度,例如vwvhvminvmax为此,W3C 官方文档指出:

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时,它们会相应地缩放。

同样,从同一个 W3C 文档中,每个单独的单元可以定义如下:

vw unit - 等于初始包含块宽度的 1%。

vh unit - 等于初始包含块高度的 1%。

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

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

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

.text {
  font-size: 3vw;
}

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

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