CSS响应字体大小

Question

CSS响应字体大小

我创建了一个使用ZURB基金会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基金会3排版示例页，当浏览器被压缩和展开时，标头会适应浏览器。

我错过了什么很明显的东西吗？我怎样才能做到这一点？

Answer 1

这个font-size在调整浏览器窗口大小时不会像这样响应。相反，它们响应浏览器缩放/类型大小设置，比如您按下克特和+在浏览器中同时在键盘上。媒体查询你必须考虑使用媒体查询减少字体大小在一定的时间间隔，它开始打破您的设计和创建滚动条。例如，尝试将其添加到CSS底部的CSS中，更改320 px宽度，用于设计开始中断的地方：@media&nbsp;only&nbsp;screen&nbsp;and&nbsp;(max-width:&nbsp;320px)&nbsp;{ &nbsp;&nbsp;&nbsp;body&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;2em;&nbsp; &nbsp;&nbsp;&nbsp;}}视口百分比长度您也可以使用视口百分比长度比如vw,&nbsp;vh,&nbsp;vmin和vmax..W3C的官方文件指出：视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们相应地进行缩放。同样，从同一W3C文档中可以定义每个单元如下：VW单元-等于初始包含块宽度的1%。VH单元-等于初始包含块高度的1%。vmin单位-等于较小的大众或VH。Vmax单位-等于较大的大众或VH。它们的使用方式与任何其他CSS值完全相同：.text&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;3vw;}.other-text&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;5vh;}可以看出，兼容性相对较好。这里..但是，有些版本的IE和Edge不支持Vmax。此外，iOS 6和7与VH单元有问题，这是在iOS 8中修复的。

Answer 2

使用CSSmedia说明符(ZURB)用于响应样式：@media&nbsp;only&nbsp;screen&nbsp;and&nbsp;(max-width:&nbsp;767px)&nbsp;{ &nbsp;&nbsp;&nbsp;h1&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;3em; &nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;h2&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;2em; &nbsp;&nbsp;&nbsp;}}