响应字体大小

Question

我使用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 Typography 示例页面上,标题在压缩和扩展时适应浏览器.

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

Answer 1

您可以使用视口值而不是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/

Answer 2

在font-size调整浏览器窗口时,就不会这样回应.相反,他们在浏览器缩放/类型的大小设置,如如果按回应ctrl并+一起键盘,同时在浏览器上.

媒体查询

您必须查看使用媒体查询以在开始破坏设计和创建滚动条的某些时间间隔缩小字体大小.

例如,尝试在底部的CSS中添加它,在设计开始破坏的任何地方更改320px宽度:

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

   body { 
      font-size: 2em; 
   }

}

视口百分比长度

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

视口百分比长度相对于初始包含块的大小.当初始包含块的高度或宽度改变时,它们相应地缩放.

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

vw unit - 等于初始包含块宽度的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中修复.

Answer 3

我一直在努力克服这个问题,并相信我找到了一个解决方案:

如果您可以为IE9 +和支持CSS calc(),rem单位和vmin单位的所有其他现代浏览器编写应用程序,则可以使用它来实现无媒体查询的可扩展文本:

body {
  font-size: calc(0.75em + 1vmin);
}

这是它的实际应用:http://codepen.io/csuwldcat/pen/qOqVNO

Answer 4

使用CSS media说明符(这是他们[zurb]使用的)用于响应式样式:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Answer 5

如果您不介意使用jQuery解决方案,可以尝试使用TextFill插件

jQuery TextFill调整文本大小以适应容器,并使字体大小尽可能大.

https://github.com/jquery-textfill/jquery-textfill

Answer 6

我可以说我的方法是解决您问题的最佳方法

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

这里clamp有 3 个参数。

• 第一个是允许的最小字体大小。

• 第三个是允许的最大字体大小。

• 第二个参数是您希望始终拥有的字体大小。它的单位必须是相对的（vw、vh、ch）而不是绝对的（即不是 px、mm、pt）。相对单位将使其尺寸随着屏幕尺寸的变化而变化。

考虑一个例子：考虑有一个你想要动态调整大小的大字体图标（响应式图标）

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

• 这里 80vw 是首选的字体大小。
• 15 rem 是最小字体大小。
• 80vh 是最大字体大小。

IE

• 如果在特定的移动屏幕尺寸中，如果 80vw < 15rem，则字体大小为 15rem。

• 如果屏幕太宽，则如果 80vw > 80vh，则字体大小为 80vh。

上面这些人推荐的方法，结果总是有点不确定……就像我们vw只用的时候，字体大小有时可能会过大或过小（无界）。

media 可以使用查询，但您必须使用至少 3 个媒体查询来限制字体大小

Answer 7

有几种方法可以实现这一目标

使用媒体查询但需要多个断点的字体大小

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

使用%或em中的维度.只需更改基本字体大小,一切都会改变.与之前的版本不同,您可以随时更改正文字体而不是h1,或者将基本字体大小设置为默认设备并将其全部放在em中

1. "Ems"(em):"em"是一个可扩展的单元.em等于当前的字体大小,例如,如果文档的字体大小为12pt,则1em等于12pt.Ems本质上是可扩展的,所以2em等于24pt,.5em等于6pt等.
2. 百分比(%):百分比单位与"em"单位非常相似,除了一些基本差异.首先,当前的字体大小等于100%(即12pt = 100%).使用百分比单位时,您的文本仍可完全扩展到移动设备和可访问性.

看kyleschaeffer.com/....

CSS3支持相对于视口的新维度.但这在android中不起作用

1. 3.2vw =视口宽度的3.2%
2. 3.2vh =视口高度的3.2%
3. 3.2vmin = 3.2vw或3.2vh的较小值

4. 3.2vmax = 3.2vw或3.2vh的较大值

   body
   {
       font-size: 3.2vw;
   }
   

看css-tricks.com/....还看看caniuse.com/....

Answer 8

还有另一种响应字体大小的方法 - 使用rem单位.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

稍后在媒体查询中,您可以通过更改基本字体大小来调整所有字体大小:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

要在IE7-8中使用此功能,您必须添加带有px单位的后备:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

如果你正在开发LESS,你可以创建一个mixin来为你做数学计算.

Rem单位支持 - http://caniuse.com/#feat=rem

Answer 9

进入非常小的屏幕时,"vw"解决方案存在问题.您可以使用calc()设置基本大小并从那里上移:

font-size: calc(16px + 0.4vw);

Answer 10

我在CSS-Tricks 上看到了一篇很棒的文章。它工作得很好：

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

例如：

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

我们可以对line-height属性应用相同的等式，使其也随浏览器而变化。

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Answer 11

这部分是在基金会5中实施的.

在_type.scss中,它们有两组头变量

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

对于中等,它们根据第一组变量生成大小.

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

而对于默认 - 即小屏幕,他们使用第二组变量来生成css.

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

您可以在自定义scss文件中使用这些变量和覆盖来设置各个屏幕大小的字体大小

Answer 12

响应字体大小也可以通过这个名为FlowType的 javascript来完成:

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - 最好的响应式网页排版:基于元素宽度的字体大小.

或者这个名为FitText的 javascript :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - 使字体大小灵活.在响应式设计上使用此插件,可以根据比例调整标题大小.

Answer 13

如果您使用的是构建工具,请尝试使用Rucksack.

否则,您可以使用CSS变量(自定义属性)轻松控制最小和最大字体大小,如下所示(演示):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Answer 14

我刚刚提出一个想法，您只需为每个元素定义一次字体大小，但它仍然受到媒体查询的影响。

首先，根据使用媒体查询的视口，我将变量“--text-scale-unit”设置为“1vh”或“1vw”。

然后我使用 calc() 变量和字体大小的乘数：

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

在我的示例中，我只使用了视口的方向，但该原则应该适用于任何媒体查询。

Answer 15

很多答案，但我没有看到有人提到最小或最大函数与媒体查询相结合

CSS 中有一个 max() 函数，所以我们上面的例子就变成了一行：

font-size: max(30vw, 30px);

或者用最小值和最大值加倍：

font-size: min(max(16px, 4vw), 22px);

这与以下内容相同：

font-size: clamp(16px, 4vw, 22px);

然后不要忘记将其包装在媒体查询中，并按照您喜欢的方式应用于您的 h1、h2、h3、h4、h5、h6。

    @media (max-width: 600px) {
      h1 {
           font-size: clamp(16px, 4vw, 22px);
         }
    }