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 only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }}

视口百分比长度

您也可以使用视口百分比长度比如vw, vh, vmin和vmax..W3C的官方文件指出：

视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生变化时，它们相应地进行缩放。

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

VW单元-等于初始包含块宽度的1%。

VH单元-等于初始包含块高度的1%。

vmin单位-等于较小的大众或VH。

Vmax单位-等于较大的大众或VH。

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

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

可以看出，兼容性相对较好。这里..但是，有些版本的IE和Edge不支持Vmax。此外，iOS 6和7与VH单元有问题，这是在iOS 8中修复的。

Answer 2

使用CSSmedia说明符(ZURB)用于响应样式：

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }}