响应式字体大小

2018-07-01 08:55:02

我使用Zurb Foundation 3网格创建了一个网站。每个页面都有一个很大的h1。

CSS

body {font-size:100%}
/* Headers */
h1 { font-size:6.2em;font-weight:500; }

HTML

<div class="row">
<div class="twelve columns text-center">
<h1> LARGE HEADER TAGLINE </h1>
</div><!-- End Tagline -->
</div><!-- End Row -->

当我将浏览器调整为手机大小时，大字体无法调整，并导致浏览器包含水平滚动以适应大文本。

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

我错过了真正明显的东西吗？我如何实现这一目标？

在调整浏览器窗口大小时， font-size不会像这样响应。相反，他们会响应浏览器缩放/字号大小设置，例如，如果在浏览器中同时按下键盘上的ctrl和+键。

媒体查询

您必须查看使用媒体查询以减少特定间隔的字体大小，从而开始破坏设计并创建滚动条。

例如，尝试在底部的CSS中添加这个内容，为设计开始打破的地方更改320px宽度：

@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;
}

从这里可以看出，兼容性相对较好。但是，某些版本的IE和Edge不支持vmax。此外，iOS 6和7在vh设备上存在问题，该问题已在iOS 8中修复。

您可以使用视口值而不是ems，pxs或pts。

1vw =视口宽度的1％

1vh =视口高度的1％

1vmin = 1vw或1vh，以较小者为准

1vmax = 1vw或1vh，以较大者为准

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

来自Css-tricks：http://css-tricks.com/viewport-sized-typography/

使用CSS media说明符（这是他们[zurb]使用的）响应式样式：

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

链接地址: http://www.djcxy.com/p/87489.html